美文网首页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