zoukankan      html  css  js  c++  java
  • 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,
                                                  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}}>
                    {this.renderSwiper()}
                </View>
            )
        }
    
    • 结束!



    作者:我的昵称好听吗
    链接:https://www.jianshu.com/p/61c59346830d
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

  • 相关阅读:
    HBase with MapReduce (MultiTable Read)
    HBase with MapReduce (SummaryToFile)
    HBase with MapReduce (Summary)
    HBase with MapReduce (Read and Write)
    HBase with MapReduce (Only Read)
    Hbase中的BloomFilter(布隆过滤器)
    HBase的快照技术
    How To Use Hbase Bulk Loading
    Cloudera-Manager修改集群的IP
    Java中的HashSet和TreeSet
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701322.html
Copyright © 2011-2022 走看看