react native swiper 轮播 Android 显

2019-01-10  本文已影响0人  ChengoShan

在使用 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>
上一篇下一篇

猜你喜欢

热点阅读