react-native 輪播圖 ——react-native-swiper使用

react-native-swiper的github地址

使用說明：

1. 先安裝React-native-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,
    }
});

 

使用說明： 
1. 先安裝React-native-swiper 
npm i react-native-swiper –save 
2. 導入Swiper 
import Swiper from ‘react-native-swiper’;

使用 Swiper

<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>

 

showsButtons	TRUE	bool	為true時顯示控制按鈕
buttonWrapperStyle	{backgroundColor: 'transparent', flexDirection: 'row', position: 'absolute', top: 0, left: 0, flex: 1, paddingHorizontal: 10, paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center'}	style	自定義樣式
nextButton	<Text style={styles.buttonText}>›</Text>	element	允許自定義下一個按鈕
prevButton	<Text style={styles.buttonText}>‹</Text>	element	允許自定義上一個按鈕

屬性	默認值	類型	描述
showsPagination	TRUE	bool	為true時顯示小圓點
paginationStyle	{...}	style	允許自定義小圓點的樣式
renderPagination	-	function	Complete control how to render pagination with three params (index, total, context) ref to this.state.index / this.state.total / this, For example: show numbers instead of dots.
dot	<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />	element	自定義沒有選中時的組件
activeDot	<View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />	element	自定義選中時的組件
dotStyle	-	object	自定義選中的元素
dotColor	-	string	自定義選中的元素
activeDotColor	-	string	自定義選中的元素
activeDotStyle	-	object	自定義選中的元素

---