解决react-native-swiper在安卓上与TabNavigator、ViewPagerAndroid共用时不显示内容问题

<ViewPagerAndroid
          style={{flex: 1}}
          initialPage={0}
          peekEnabled={true}
          ref={viewPager => {
            this.viewPager = viewPager
          }}
          onPageSelected={(e) => this.bindOnPageSelected(e)}
        >
  <View style={styles.productsContainer}>
             <Swiper
              index={0}
              loop={false}
              renderPagination={renderPagination}
        >
          <Image style={styles.imgStyle} source={ImageStore.commonPic.defaultGood}/>
          <Image style={styles.imgStyle} source={ImageStore.commonPic.defaultGood}/>
          <Image style={styles.imgStyle} source={ImageStore.commonPic.defaultGood}/>
        </Swiper>
 </View>
 <View style={styles.detailsContainer}>
            ...
 </View>
</ViewPagerAndroid>

如果直接包裹Swiper组件渲染时图片不会显示:


解决办法:添加定时器

constructor(props) {
    super(props);
    this.state = {
      swiperShow: false
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        swiperShow: true
      });
    }, 0)
  }

render(){
  return(
    <View>  
     {this.state.swiperShow && <SwiperImage/>}
    <View/>
 )
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,143评论 25 709
  • 北方一年四季很分明,春夏秋冬,我独喜欢冬天。因为我许多幸福的回忆都发生在冬日里。 读小学的时候,我是全年级出了名的...
    吉野佳阅读 858评论 12 18
  • 东欧行--与拿破仑的偶遇 你的到来 军号和战鼓 让布拉底斯拉瓦城堡哆嗦 鸟儿望见你的缨盔 四散飞去 你跳下马...
    申维希阅读 344评论 0 2
  • 1. npm 发布包的版本指定规则 使用 Npm 发布一个包的时候,往往要遵循 x.y.z 的规则,发布的第一个版...
    神秘者007阅读 699评论 0 0
  • 好运常在。 原创文 | 是热河 (清风浪港手写铺原创文,未经授权请勿转载) 我舍友与我说,他爸病了,现在搬回乡下老...
    清风浪港手写铺阅读 336评论 0 0