美文网首页
react native swiper 轮播 Android 显

react native swiper 轮播 Android 显

作者: ChengoShan | 来源:发表于2019-01-10 21:12 被阅读0次

    在使用 swiper 轮播图时遇到一个坑

    Swiper 一般是放在某一个 视图 View 下的,在 iOS 端显示的时候没有任何问题,图片可以或者文本都能正常轮播,但是放在 Android 上之后就会出现一个问题,轮播的位置不是在我给的那个视图 view 里,而是从屏幕最右端到最左端,无论我给它设置 width 或者 给 view 设置 width 都没有作用。最后在 view 中加了 overflow: "hidden" 之后就能控制了。

    <View style={{
                            padding: 5,
                            overflow: "hidden"
                          }}>
                            <Swiper
                              height={30}
                              horizontal={true}
                              autoplay={true}
                              autoplayTimeout={3}
                              showsPagination={false}
                              showsButtons={false}
    
                            >
                              <View style={styles.cdtSroll}>
                                <Image
                                  style={styles.scrollCdtImg}
                                  source={require('../images/message.png')} 
                                />
                                <Text style={styles.sdts}  numberOfLines={1}>
                                  内容玩法还是挺丰富的
                                </Text>
                              </View>
                              <View style={styles.cdtSroll}>
                                <Image
                                  style={styles.scrollCdtImg}
                                  source={require('../images/question.png')} 
                                />
                                <Text style={styles.sdts} numberOfLines={1}>
                                  这游戏的装备全靠打
                                </Text>
                              </View>
                              <View style={styles.cdtSroll}>
                                <Image
                                  style={styles.scrollCdtImg}
                                  source={require('../images/wallet.png')} 
                                />
                                <Text style={styles.sdts} numberOfLines={1}>
                                  还可以先玩玩看吧
                                </Text>
                              </View>
                            </Swiper>
    

    相关文章

      网友评论

          本文标题:react native swiper 轮播 Android 显

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