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