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>

运行结果如下:


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

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

    this.state = {
      key:0
    };

      <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>

在componentDidMount强制刷新视图

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

运行结果: