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

來源：简书

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

巴特西

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

最新文章

热门文章