ReactNative0.52實現(xiàn)輪播圖效果

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

從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供網(wǎng)站建設(shè)、網(wǎng)站制作服務(wù)體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。創(chuàng)新互聯(lián)公司將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。

1、通過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 可以很容易的實現(xiàn)輪播的效果

• showButtons —— 是否顯示左右翻頁按鈕

• autoPlay —— 是否自動播放

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

• dotStyle —— 小點點的樣式

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

樣式：

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,
  },
});

三、解決不顯示問題

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

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

1、真正調(diào)用接口加載圖片的時候，不會出現(xiàn)一開始圖片不顯示的問題。

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

if (this.state.swiperShow) {
  return (
   
     …………略
   
  )
} else {
  return (
   
     
   
  );
}

關(guān)于React Native 0.52實現(xiàn)輪播圖效果問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

名稱欄目：ReactNative0.52實現(xiàn)輪播圖效果
當(dāng)前地址：http://m.jiaotiyi.com/article/jhpcjd.html