react-native-swiper苹果正常显示，Android不显示

在使用react-native-swiper时，最好不要放到（FlatList , SectionList,ListView,ScrollView 等）组件中，否则Android 可能不会正常显示图片；

我们只需要在

初始化的时候设置一个属性来控制显示swiper，然后在componentDidMount后，通过setTimeout来改变显示即可：

• 设置控制显示swiper的属性

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

• 通过setTimeout控制swiper显示出来

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

• 渲染swiper的方法

//渲染swiper
    renderSwiper = () => {
        if (this.state.showSwiper) {
            return (<Swiper
                style={styles.wrapper}
                showsButtons={false}
                key={this.props.banner.length} //需要添加key，否则报错
                activeDotColor={"#fff"}
                paginationStyle={{bottom: scaleSize(10)}}
                autoplay={true}>

                {
                      this.props.banner.map((item, index) => {
                                <View style={styles.slide} key={item.title}>
                                        <Image
                                              style={{
                                              width: width,
                                              height: scaleSize(160),
                                              }}
                                              resizeMode={"cover"}
                                              source={{uri: item.img}}
                                         />
                                </View>);
                       })
                }
            </Swiper>)
        } else {
            return (<View style={{height: scaleSize(160)}}/>)
        }
   }

• render方法中调用

render() {
        return (
            <View style={{height: scaleSize(160), width: width}}>
                {this.renderSwiper()}
            </View>
        )
    }

• 结束！

作者：我的昵称好听吗

链接：https://www.jianshu.com/p/61c59346830d

來源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。