React Native 0.52實(shí)現(xiàn)輪播圖效果

React Native 0.52實(shí)現(xiàn)輪播圖效果？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

1、通過(guò)npm安裝react-native-swiper

npm install react-native-swiper --save

2、在recommend.js引入react-native-swiper

import Swiper from 'react-native-swiper';

3、用 react-native-swiper 可以很容易的實(shí)現(xiàn)輪播的效果

• showButtons —— 是否顯示左右翻頁(yè)按鈕

• autoPlay —— 是否自動(dòng)播放

• paginationStyle —— 包含小點(diǎn)點(diǎn)的容器的樣式，這里用來(lái)調(diào)整位置

• dotStyle —— 小點(diǎn)點(diǎn)的樣式

• activeDotStyle —— 當(dāng)前被激活的小點(diǎn)點(diǎn)的樣式
  

<Swiper
   style={styles.wrapper}
   height={width*40/75}
   showsButtons={false}
   autoplay={true}
   paginationStyle={styles.paginationStyle}
   dotStyle={styles.dotStyle}
   activeDotStyle={styles.activeDotStyle}
>
    <Image source={require('../../img/1.jpg')} style={styles.bannerImg} />
    <Image source={require('../../img/2.jpg')} style={styles.bannerImg} />
    <Image source={require('../../img/3.jpg')} style={styles.bannerImg} />
    <Image source={require('../../img/4.jpg')} style={styles.bannerImg} />
    <Image source={require('../../img/3.jpg')} style={styles.bannerImg} />
</Swiper>

樣式：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  bannerImg: {
    height: width*40/75,
    width: width,
  },
  wrapper: {
    width: width,
  },
  paginationStyle: {
    bottom: 6,
  },
  dotStyle: {
    width: 22,
    height: 3,
    backgroundColor:'#fff',
    opacity: 0.4,
    borderRadius: 0,
  },
  activeDotStyle: {
    width: 22,
    height: 3,
    backgroundColor:'#fff',
    borderRadius: 0,
  },
});

三、解決不顯示問(wèn)題

輪播圖放在APP的首頁(yè)，同樣有不顯示的問(wèn)題，解決辦法和上一篇的辦法幾乎一樣，可以看一下上一篇或是完整代碼，這里就不再贅述。

這里和上一篇相比有兩處不一樣，需要說(shuō)一下。

1、真正調(diào)用接口加載圖片的時(shí)候，不會(huì)出現(xiàn)一開(kāi)始圖片不顯示的問(wèn)題。

2、在狀態(tài)為false的時(shí)候，先顯示第一張圖片

if (this.state.swiperShow) {
  return (
   <Swiper >
     …………略
   </Swiper>
  )
} else {
  return (
   <View style={{ height: width*40/75 }}>
     <Image source={require('../../img/1.jpg')} style={styles.bannerImg} />
   </View>
  );
}

關(guān)于React Native 0.52實(shí)現(xiàn)輪播圖效果問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。