美文网首页react-native
解决react-native-swiper在安卓上与TabNav

解决react-native-swiper在安卓上与TabNav

作者: 冬天73051 | 来源:发表于2018-04-20 16:12 被阅读0次
<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/>
 )
}

相关文章

网友评论

    本文标题:解决react-native-swiper在安卓上与TabNav

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