今天學習了輪播圖的使用，上網(wǎng)查閱了一下旭寿，發(fā)現(xiàn)有react-native-swiper和React-Native-Viewpager（https://blog.csdn.net/zhukui66/article/details/51077592）兩種封裝的比較好的第三方組件户秤，對比了下文檔，覺得react-native-swiper功能更加完善，而且文檔說明比較全面忧额，所以只用了react-native-swiper，下面介紹下react-native-swiper的使用愧口。該組件同時支持android和iOS睦番。
react-native-swiper的github地址
使用說明：
- 先安裝React-native-swiper
npm install react-native-swiper --save - 導入Swiper
import Swiper from ‘react-native-swiper’;
3.使用Swiper
<Swiper
style={styles.swiper}
height={200}
horizontal={true}
paginationStyle={{bottom: 10}}
showsButtons={false}>
<Image source={require('./js/img/a.jpg')} style={styles.img}/>
<Image source={require('./js/img/b.jpg')} style={styles.img}/>
<Image source={require('./js/img/c.jpg')} style={styles.img}/>
</Swiper>
const styles = StyleSheet.create({
swiper: {},
img: {
width: dimensions.width,
height: 200,
}
});
4.相關屬性和方法介紹
<Swiper
style={styles.swiper} //樣式
height={200} //組件高度
loop={true} //如果設置為false，那么滑動到最后一張時耍属，再次滑動將不會滑到第一張圖片托嚣。
autoplay={true} //自動輪播
autoplayTimeout={4} //每隔4秒切換
horizontal={true} //水平方向，為false可設置為豎直方向
paginationStyle={{bottom: 10}} //小圓點的位置：距離底部10px
showsButtons={false} //為false時不顯示控制按鈕
showsPagination={false} //為false不顯示下方圓點
dot={<View style={{ //未選中的圓點樣式
backgroundColor: 'rgba(0,0,0,.2)',
width: 18,
height: 18,
borderRadius: 4,
marginLeft: 10,
marginRight: 9,
marginTop: 9,
marginBottom: 9,
}}/>}
activeDot={<View style={{ //選中的圓點樣式
backgroundColor: '#007aff',
width: 18,
height: 18,
borderRadius: 4,
marginLeft: 10,
marginRight: 9,
marginTop: 9,
marginBottom: 9,
}}/>}
>
<Image source={require('./js/img/a.jpg')} style={styles.img}/>
<Image source={require('./js/img/b.jpg')} style={styles.img}/>
<Image source={require('./js/img/c.jpg')} style={styles.img}/>
</Swiper>
image.png
image.png
image.png
image.png
