RN 端 Swiper 用户主动滑动，没法触发 onChange 事件

[zhuliminl]

问题描述
RN 端 Swiper 用户主动滑动，没法触发 onChange 事件

复现步骤
[复现问题的步骤]

1. 左右滑动 SwiperItem，本应触发 onChange
2. 目前没有触发 onChange，于是 current 没有更新

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Swiper, SwiperItem } from '@tarojs/components'
import './index.scss'

const TAB_LIST = [
  {
    key: 0,
    title: '0000',
    title_desc: '今日评估效果0000',
  },
  {
    key: 1,
    title: '111111',
    title_desc: '本月评估效果1111',
  },
  {
    key: 2,
    title: '22222',
    title_desc: '上月评估效果2222',
  },
  {
    key: 3,
    title: '33333',
    title_desc: '上月总确认收3333',
  },
]

export default class Test extends Component {
  state = {
    current: 0
  }

  handleChange = (event) => {
    const {detail} = event
    const {current} = detail
    console.log("FIN current", current)
    this.setState({current})
  }

  render() {
    return (
      <View 
        className="test-comp"
        style={{
          marginTop: 100,
        }}
      >
        {
          TAB_LIST.map(item => {
            return (
              <View key={item.key} style={{backgroundColor: '#FFF', flexDirection: 'row'}}
              onClick={() => {
                this.setState({current: item.key})
              }}
              >
                <Text style={{
                  fontSize: 35,
                  color: this.state.current === item.key ? 'red': '#333',
                }}>{item.title}</Text>
              </View>
            )
          })
        }
        <Swiper
          current={this.state.current}
          onChange={this.handleChange.bind(this)}
          style={{
            height: 300,
            backgroundColor: '#f5F6F7',
          }}
        >
          {
            TAB_LIST.map(item => {
              return (
                <SwiperItem key={item.key}>
                  <View>
                    <Text style={{fontSize: 35, color: 'red'}}>=>current{this.state.current}</Text>
                    <Text style={{fontSize: 35}}>{item.title_desc}</Text>
                  </View>
                </SwiperItem>
              )
            })
          }
        </Swiper>
      </View>
    )
  }
}

期望行为
想通过左右滑动 SwiperItem 来触发 onChange 事件，来更新 current ，来达到同步更新当前激活的 Tab 。就像下面 h5 里面实现的那样

报错信息
没有报错信息

[这里请贴上你的完整报错截图或文字]

系统信息
Taro CLI 1.3.10 environment info:
System:
OS: macOS 10.14.6
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.14.1 - ~/.nodebrew/current/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nodebrew/current/bin/npm
npmPackages:
@tarojs/async-await: ^1.3.10 => 1.3.10
@tarojs/components: 1.3.10 => 1.3.10
@tarojs/components-rn: ^1.3.10 => 1.3.10
@tarojs/plugin-babel: 1.3.10 => 1.3.10
@tarojs/plugin-csso: 1.3.10 => 1.3.10
@tarojs/plugin-sass: 1.3.10 => 1.3.10
@tarojs/plugin-uglifyjs: 1.3.10 => 1.3.10
@tarojs/redux: ^1.3.10 => 1.3.10
@tarojs/redux-h5: ^1.3.10 => 1.3.10
@tarojs/router: 1.3.10 => 1.3.10
@tarojs/taro: 1.3.10 => 1.3.10
@tarojs/taro-alipay: 1.3.10 => 1.3.10
@tarojs/taro-h5: 1.3.10 => 1.3.10
@tarojs/taro-qq: 1.3.10 => 1.3.10
@tarojs/taro-quickapp: 1.3.10 => 1.3.10
@tarojs/taro-redux-rn: ^1.3.10 => 1.3.10
@tarojs/taro-rn: ^1.3.10 => 1.3.10
@tarojs/taro-router-rn: ^1.3.10 => 1.3.10
@tarojs/taro-swan: 1.3.10 => 1.3.10
@tarojs/taro-tt: 1.3.10 => 1.3.10
@tarojs/taro-weapp: 1.3.10 => 1.3.10
@tarojs/webpack-runner: ^1.3.10 => 1.3.11
eslint-config-taro: 1.3.10 => 1.3.10
eslint-plugin-taro: 1.3.10 => 1.3.10
nerv-devtools: ^1.4.0 => 1.4.3
nervjs: ^1.4.0 => 1.4.3
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4
stylelint-config-taro-rn: 1.3.10 => 1.3.10
stylelint-taro-rn: 1.3.10 => 1.3.10

补充信息
经过我的测试，我发现可能和
https://github.com/Manjiz/react-native-swiper/blob/master/src/index.tsx
341 行前后计算出来的 index有关

            let actualIndex = parseInt(Math.round((contentOffset[dir] || 0) / step) + '');
            if (loop) {
                if (actualIndex === 0) {
                    index = total - 1;
                    contentOffset[dir] = step * total;
                    loopJump = true;
                }
                else if (actualIndex === total + 1) {
                    index = 0;
                    contentOffset[dir] = step;
                    loopJump = true;
                }
                else {
                    index = actualIndex - 1;
                }
            }
            const stateWouldBeSet = { index, loopJump };

可能是 index 最后算出来后不是正确的，所以最后没导致更新。

第二次提交 issure，如有不规范的地方，请指正，我尽量提供更完整的信息。

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Manjiz]

真机还是模拟器？我试的是可以的

[zhuliminl]

真机还是模拟器？我试的是可以的

我试的是 ios 真机

[taro-bot]

CC @Pines-Cheng

[hujingyuki]

请问下楼主有解决办法了吗？怎么莫名其妙就被关了

[enjoyWeb]

H5貌似onChange事件不生效呀，小程序却可以，但是Taro里都写着支持的呀