基於React Native 0.52實現輪播圖效果

本文基於React Native 0.52

Demo上傳到Git了，有須要能夠看看，寫了新內容會上傳的（Git地址）

1、總覽

輪播圖幾乎是必備的效果，這裏選擇 react-native-swiper 來實現，效果以下圖：

2、實現輪播圖效果

一、經過npm安裝react-native-swiper

`npm install react-native-swiper --save`

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

`import Swiper from` `'react-native-swiper'``;`

三、用 react-native-swiper 能夠很容易的實現輪播的效果

showButtons —— 是否顯示左右翻頁按鈕
autoPlay —— 是否自動播放
paginationStyle —— 包含小點點的容器的樣式，這裏用來調整位置
dotStyle —— 小點點的樣式
activeDotStyle —— 當前被激活的小點點的樣式

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

3、解決不顯示問題

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

這裏和上一篇相比有兩處不同，須要說一下。

一、真正調用接口加載圖片的時候，不會出現一開始圖片不顯示的問題。

二、在狀態爲false的時候，先顯示第一張圖片

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

爲了學習工做與休閒娛樂互不衝突，現新建圈【碼農茶水鋪】用於程序員生活，愛好，交友，求職招聘，吐槽等話題交流，但願各位大神工做之餘到茶水鋪來喝茶聊天。羣號:582735936