美文网首页程序员
react-native使用react-native-swip

react-native使用react-native-swip

作者: 骑着猪的小哥哥 | 来源:发表于2017-07-20 11:09 被阅读635次

    问题

    在使用 swiper 的时候,发现在安卓机下,如果用到了可滚动组件(如:FlatList , SectionList,ListView,ScrollView 等),swiper无法正常显示。

    解决方法

    加个只调用一次的定时器

    constructor(props) {
        super(props);
        this.state = {
            swiperShow:false,
        };
    }
    
    componentDidMount(){
    //系统自带方法只调用一次
        setTimeout(()=>{
           this.setTimeout = this.setState({swiperShow:true});
        },1)
    }
    //移除定时器
     componentWillUnmount(){
        this.setTimeout && clearTimeout(this.setTimeout);
    }
    renderSwiper=()=>{
        if(this.state.swiperShow){
            return (
                <Swiper height={150} autoplay={true} activeDotColor="#fff">
                    {BANNER_LIST.map((item, i) => {
                        return <Image source={require('../../../img/banner.jpeg')}   key={i} style={styles.banner}/>;
                    })}
                </Swiper>
            );
        }else {
            return <View style={{height:150}}></View>;
        }
    }
    
    
    

    然后在render()里面需要渲染 swiper 的地方调用 {this.renderSwiper()}

    相关文章

      网友评论

        本文标题: react-native使用react-native-swip

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