美文网首页react-native
react-native-swiper 安卓不能垂直滚动问题

react-native-swiper 安卓不能垂直滚动问题

作者: 小小小小的人头 | 来源:发表于2019-12-04 20:17 被阅读0次

最近开发了个功能 轮播切换的效果。只不过是垂直的方向切换;效果大概是下面这个样子;IOS端垂直切换是没有问题的。但是在安卓端是不可以的;

垂直切换.gif

就看了一下源码;放一下主要的代码。这边他做了IOS和安卓端的区分;
IOS就是使用正常的ScrollView进行展示的 安卓端使用的是原生模块ViewPagerAndroid
问了下安卓同事。说这个模块就是不支持垂直滚动的;

 renderScrollView = pages => {
    if (Platform.OS === 'ios' || Platform.OS === 'web') {
      return (
        <ScrollView ref={this.refScrollView}
          {...this.props}
          {...this.scrollViewPropOverrides()}
          contentContainerStyle={[styles.wrapperIOS, this.props.style]}
          contentOffset={this.state.offset}
          onScrollBeginDrag={this.onScrollBegin}
          onMomentumScrollEnd={this.onScrollEnd}
          onScrollEndDrag={this.onScrollEndDrag}
          style={this.props.scrollViewStyle}>
          {pages}
        </ScrollView>
       )
    }
    let r = require('react-native')
    return (
      <r.ViewPagerAndroid ref={this.refScrollView}
        {...this.props}
        initialPage={this.props.loop ? this.state.index + 1 : this.state.index}
        onPageSelected={this.onScrollEnd}
        key={pages.length}
        style={[styles.wrapperAndroid, this.props.style]}>
        {pages}
      </r.ViewPagerAndroid>
    )
  }

然后怎么办呢、 我是这样干的。。。。就是让他们所有的系统都用ScrollView、说实在的我也不知道为什么要做这个区分。。就测试了下 发现都支持了。。

 renderScrollView = pages => {
return (
     <ScrollView ref={this.refScrollView}
          {...this.props}
          {...this.scrollViewPropOverrides()}
          contentContainerStyle={[styles.wrapperIOS, this.props.style]}
          contentOffset={this.state.offset}
          onScrollBeginDrag={this.onScrollBegin}
          onMomentumScrollEnd={this.onScrollEnd}
          onScrollEndDrag={this.onScrollEndDrag}
          style={this.props.scrollViewStyle}>
          {pages}
        </ScrollView>
  )
}

但是哦 我上面的gif 是做了点击然后 出发切换效果的;用的是scrollBy 这个方法;
这边也需要处理一下;看一下最初代码

 scrollBy = (index, animated = true) => {
 if (Platform.OS !== 'ios') {
      this.scrollView && this.scrollView[animated ? 'setPage' : 'setPageWithoutAnimation'](diff)
    } else {
      this.scrollView && this.scrollView.scrollTo({ x, y, animated })
    }
}

因为 setPage和setPageWithoutAnimation 是ViewPagerAndroid 这个里面写的方法;所以出发这个方法 汇报找不到这个函数;
于是乎 简单粗暴的改一下-统一都使用 scrollView 的scrollTo方法进行滚动

 this.scrollView && this.scrollView.scrollTo({ x, y, animated })

好了 记录一下。希望帮助到有需要的小伙伴们;

可能还有其他方法用到了原来安卓ViewPagerAndroid里面的方法。但是我没用到。 那就自行解决吧。。。。

相关文章

网友评论

    本文标题:react-native-swiper 安卓不能垂直滚动问题

    本文链接:https://www.haomeiwen.com/subject/reolgctx.html