rn 轮播图

1、安装
	yarn add [email protected]
	
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>
        
	样式(图片轮播图,只需设置容器高度,内部图片width:'100%')
		   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',
    }
  })
           

代码示例:

import React,{Component} from 'react'
import 'react-native-gesture-handler';
import Swiper from 'react-native-swiper';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import { createDrawerNavigator } from '@react-navigation/drawer';

import {
  View,
  Text,
  StyleSheet,
  Button,
  FlatList,
  SectionList,
  Image
} from 'react-native'

class App extends Component{
  render()
  {
    return(
      <View>
        <View style={styles.wrapper}>
          <Swiper 
            style={styles.swiper}
            showsButtons={true}
            autoplay={true}  
            autoplayTimeout={5}
          
          >
            <View style={styles.item}>
              <Image style={styles.image} source={{uri:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg'}}/>
              {/* <Text>aaa</Text> */}
            </View>
            <View>
              <Image source={{uri:'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1830914723,3154965800&fm=26&gp=0.jpg'}} />
            </View>
            <View source={{uri:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689053532,4230915864&fm=26&gp=0.jpg'}}>
              <Image />
            </View>
            <View>
              <Image source={{uri:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=251289958,1860898046&fm=26&gp=0.jpg'}} />
            </View>
          </Swiper>
        </View>
        <View style={{height:200,width:200}}>
              <Image style={{flex:1,resizeMode:'contain'}} source={{uri:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=251289958,1860898046&fm=26&gp=0.jpg'}} />
            </View>
      </View>
    )
  }
}



const styles = StyleSheet.create({
    wrapper:{
      height:300
    },
    swiper:{

    },
    item:{
      flex:1,
      justifyContent:'center',
      alignItems:'center'
    },
    image:{
      flex:1,
      resizeMode:'cover',
      width:'100%'
    }


})


export default App