本文基于React Native 0.52
Demo上傳到Git了，有需要可以看看，寫了新內容會上傳的（Git地址）
一、總覽
輪播圖幾乎是必備的效果，這里選擇 react-native-swiper 來實現，效果如下圖：
二、實現輪播圖效果
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 可以很容易的實現輪播的效果
<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, },});三、解決不顯示問題
輪播圖放在APP的首頁，同樣有不顯示的問題，解決辦法和上一篇的辦法幾乎一樣，可以看一下上一篇或是完整代碼，這里就不再贅述。
這里和上一篇相比有兩處不一樣，需要說一下。
1、真正調用接口加載圖片的時候，不會出現一開始圖片不顯示的問題。
2、在狀態為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> );}recommend.js完整代碼 地址
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
