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

 1 <Swiper
 2     style={styles.swiper}          //樣式
 3
 
     height={200}                   //元件高度
 4     loop={true}                    //如果設定為false，那麼滑動到最後一張時，再次滑動將不會滑到第一張圖片。
 5     autoplay={true}                //自動輪播
 6 autoplayTimeout={4}                //每隔4秒切換
 7     horizontal={true}              //水平方向，為false可設定為豎直方向
 8     paginationStyle={{bottom: 10}} //小圓點的位置：距離底部10px
 

 9     showsButtons={false}           //為false時不顯示控制按鈕
10     showsPagination={false}       //為false不顯示下方圓點
11     dot={<View style={{           //未選中的圓點樣式
12     backgroundColor: 'rgba(0,0,0,.2)',
13     width: 18,
14     height: 18,
15     borderRadius: 4,
16     marginLeft: 10,
17     marginRight: 9,
18     marginTop: 9,
19     marginBottom: 9,
20 }}/>}
21     activeDot={<View style={{    //選中的圓點樣式
22     backgroundColor: '#007aff',
23     width: 18,
24     height: 18,
25     borderRadius: 4,
26     marginLeft: 10,
27     marginRight: 9,
28     marginTop: 9,
29     marginBottom: 9,
30 }}/>}
31  
32 >
33     <Image source={require('./js/img/a.jpg')} style={styles.img}/>
34     <Image source={require('./js/img/b.jpg')} style={styles.img}/>
35     <Image source={require('./js/img/c.jpg')} style={styles.img}/>
36 </Swiper>