react-native-scrollable-tab-view 嵌套react-native-swiper 引发的 bug

问题描述:当 swiper 嵌套在react-native-scrollable-tab-view中时,在 ios 端正常,但在 Android 端会导致 swiper 子视图不出现 
 
打开 swiper 和scrollable的源码发现,在 Android 端使用的是 
viewpagerAndroid, 猜测是因为viewpagerAndroid的嵌套导致的问题,于是写代码测试

      <ViewPagerAndroid  initialPage={0} style={{height:100}}>
        <View style={{backgroundColor:'red'}}>
            <Text style={{fontSize:50,color:'white'}}>aa</Text>
        </View>
        <View style={{backgroundColor:'blue'}}>
            <ViewPagerAndroid initialPage={0} style={{height:100}}>
              <View  style={{backgroundColor:'yellow'}}>
                <Text style={{fontSize:50,color:'white'}}>bb</Text>
              </View>
              <View style={{backgroundColor:'green'}}>
                <Text style={{fontSize:50,color:'white'}}>cc</Text>
              </View>
            </ViewPagerAndroid>
        </View>
      </ViewPagerAndroid>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

运行结果如下: 
 
 
左右滑动发现只有red 和 blue 背景的视图, bb 和 cc 文案也没有,表明第二个 ViewPagerAndroid没有渲染

在 github react native上查询,发现有很多类似问题 ViewPagerAndroid nest issue 
看了之后使用了其中几个方法都无效,但是给了一个灵感,以下是解决方案: 
在第二个 viewpagerAndroid 添加一个 key 
首先添加一个 state

    this.state = {
      key:0
    };

• 1
• 2
• 3

      <ViewPagerAndroid  initialPage={0} style={{height:100}}>
        <View style={{backgroundColor:'red'}}>
            <Text style={{fontSize:50,color:'white'}}>aa</Text>
        </View>
        <View style={{backgroundColor:'blue'}}>
            <ViewPagerAndroid key={this.state.key} initialPage={0} style={{height:100}}>
              <View  style={{backgroundColor:'yellow'}}>
                <Text style={{fontSize:50,color:'white'}}>bb</Text>
              </View>
              <View style={{backgroundColor:'green'}}>
                <Text style={{fontSize:50,color:'white'}}>cc</Text>
              </View>
            </ViewPagerAndroid>
        </View>
      </ViewPagerAndroid>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

在componentDidMount强制刷新视图

  componentDidMount() {
    this.timer = setTimeout(() => {this.setState({key:1})}, 0);
  }

• 1
• 2
• 3

运行结果: 
 

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/a719900503/article/details/78531336

问题描述:当 swiper 嵌套在react-native-scrollable-tab-view中时,在 ios 端正常,但在 Android 端会导致 swiper 子视图不出现 
 
打开 swiper 和scrollable的源码发现,在 Android 端使用的是 
viewpagerAndroid, 猜测是因为viewpagerAndroid的嵌套导致的问题,于是写代码测试

      <ViewPagerAndroid  initialPage={0} style={{height:100}}>
        <View style={{backgroundColor:'red'}}>
            <Text style={{fontSize:50,color:'white'}}>aa</Text>
        </View>
        <View style={{backgroundColor:'blue'}}>
            <ViewPagerAndroid initialPage={0} style={{height:100}}>
              <View  style={{backgroundColor:'yellow'}}>
                <Text style={{fontSize:50,color:'white'}}>bb</Text>
              </View>
              <View style={{backgroundColor:'green'}}>
                <Text style={{fontSize:50,color:'white'}}>cc</Text>
              </View>
            </ViewPagerAndroid>
        </View>
      </ViewPagerAndroid>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

运行结果如下: 
 
 
左右滑动发现只有red 和 blue 背景的视图, bb 和 cc 文案也没有,表明第二个 ViewPagerAndroid没有渲染

在 github react native上查询,发现有很多类似问题 ViewPagerAndroid nest issue 
看了之后使用了其中几个方法都无效,但是给了一个灵感,以下是解决方案: 
在第二个 viewpagerAndroid 添加一个 key 
首先添加一个 state

    this.state = {
      key:0
    };

• 1
• 2
• 3

      <ViewPagerAndroid  initialPage={0} style={{height:100}}>
        <View style={{backgroundColor:'red'}}>
            <Text style={{fontSize:50,color:'white'}}>aa</Text>
        </View>
        <View style={{backgroundColor:'blue'}}>
            <ViewPagerAndroid key={this.state.key} initialPage={0} style={{height:100}}>
              <View  style={{backgroundColor:'yellow'}}>
                <Text style={{fontSize:50,color:'white'}}>bb</Text>
              </View>
              <View style={{backgroundColor:'green'}}>
                <Text style={{fontSize:50,color:'white'}}>cc</Text>
              </View>
            </ViewPagerAndroid>
        </View>
      </ViewPagerAndroid>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

在componentDidMount强制刷新视图

  componentDidMount() {
    this.timer = setTimeout(() => {this.setState({key:1})}, 0);
  }

• 1
• 2
• 3

运行结果: