react-native

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

2018-04-20  本文已影响0人  冬天73051
<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/>
 )
}
上一篇 下一篇

猜你喜欢

热点阅读