rn 轮播图

1、安装
	yarn add react-native-swiper@nightly
	
2、导入
	import Swiper from 'react-native-swiper';
	
3、使用
	    <View style={{height:400}}>
	    
          <Swiper style={styles.wrapper} >
              
            <View style={styles.slide1}>
                <Text style={styles.text}>Hello Swiper</Text>
            </View>
            <View style={styles.slide2}>
                <Text style={styles.text}>Beautiful</Text>
            </View>
            <View style={styles.slide3}>
                <Text style={styles.text}>And simple</Text>
            </View>
            
            </Swiper>
        </View>
        
	样式
		   const styles = StyleSheet.create({
		    wrapper: {
		    },
		    slide1: {
		      flex: 1,
		      justifyContent: 'center',
		      alignItems: 'center',
		      backgroundColor: '#9DD6EB',
		    },
		    slide2: {
		      flex: 1,
		      justifyContent: 'center',
		      alignItems: 'center',
		      backgroundColor: '#97CAE5',
		    },
		    slide3: {
		      flex: 1,
		      justifyContent: 'center',
		      alignItems: 'center',
		      backgroundColor: '#92BBD9',
		    },
		    text: {
		      color: '#fff',
		      fontSize: 30,
		      fontWeight: 'bold',
		    }
		  })

4、属性,在Swiper标签上设置

	showsButtons={true}    	 			//是否显示左右箭头
    autoplay={true}          			//是否自动播放
	autoplayTimeout={2}     			//自动播放间隔,单位为秒
	showsPagination={false}   			//是否显示圆点	  
	paginationStyle={{bottom: 10}}  	//设置圆点位置
	dot={<View style={{...}}/>}    		//设置未选中圆点样式,此时圆点变成了'div',不再是原点,通过div的方式设置样式
	activeDot={<View style={{...}}/>}   //设置选中圆点样式
	dotColor							//设置未选中圆点颜色,自定义圆点样式后无效
	activeDotColor='yellow'  			//设置选中圆点颜色,自定义圆点后样式无效
	width								//设置宽度,高度只能通过外层包裹一层View来设置,默认填满父容器

代码示例:

import React,{Component} from 'react'
import {View,Text,StyleSheet} from 'react-native'
import Swiper from 'react-native-swiper';

export default class App extends Component{
    render()
    {
        return(
            <>
            <View style={{height:400}}>
              <Swiper style={styles.wrapper} 
                  //左右箭头
                  showsButtons={true}
                  autoplay={true}
                  //轮播间隔
                  autoplayTimeout={2}
                  //下方原点
                  // showsPagination={false} 	
                //   paginationStyle={{bottom: 10}}
                //   dot={<View style={{           //未选中的圆点样式
                //     backgroundColor: 'rgba(0,0,0,.2)',
                //     width: 18,
                //     height: 18,
                //     marginLeft:20
                // }}/>}
                //   activeDot={<View style={{ 
  
                //     backgroundColor: 'red',
                //     width: 18,
                //     height: 18,
                //     marginLeft:20,
                //     borderRadius:50
                //   }}/>}
                dotColor='red'
                activeDotColor='yellow'
                >
                  
                <View style={styles.slide1}>
                    <Text style={styles.text}>Hello Swiper</Text>
                </View>
                <View style={styles.slide2}>
                    <Text style={styles.text}>Beautiful</Text>
                </View>
                <View style={styles.slide3}>
                    <Text style={styles.text}>And simple</Text>
                </View>
                </Swiper>
            </View>
            </>
        )
    }
}

const styles = StyleSheet.create({
    wrapper: {
    },
    slide1: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#9DD6EB',
    },
    slide2: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#97CAE5',
    },
    slide3: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#92BBD9',
    },
    text: {
      color: '#fff',
      fontSize: 30,
      fontWeight: 'bold',
    }
  })