這裡我使用的是一個第三方的外掛react-native-swiper

具體可以參考https://www.npmjs.com/package/react-native-swiper

效果圖

使用：

$ npm i react-native-swiper --save

 程式碼：

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View, TouchableOpacity, Image, ScrollView
} from 'react-native';
import Swiper from 'react-native-swiper'
var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get("window");//第一種寫法
export default class MyApp extends Component {

   _onIndexChanged(index){
       // alert(index)
   }
    render() {
        return (
           <View style={styles.wrapper}>

               <View style={styles.swiperView}>
                   <Swiper style={styles.swiperStyle}
                           showsButtons={false}//左右兩邊的< >箭頭是否顯示
                           horizontal={true}//是否水平滾動，預設true
                           loop={true}//是否輪播，預設true
                           index={1}//當前預設第幾頁，預設0
                           onIndexChanged={this._onIndexChanged}//當前滾動到第幾頁的事件
                           autoplayTimeout = {1}  //輪播的時間
                           autoplay={true}//是否自動輪播，預設false
                           autoplayDirection={true}//是否反向輪播，預設true 左->右
                           showsPagination = {true}  //是否顯示dot
                           dot = {<View style={{width:8,height:8,backgroundColor:'red',marginRight: 5}}/>} //指定dot
                           paginationStyle = {{bottom: 10}} //dot的位置
                           activeDot = {<View style={{width:8,height:8,backgroundColor:'yellow',marginRight: 5}} />} //選中的dot的樣式

                   >
                       <View style={styles.slide1} >
                           <Text style={styles.text}>Hello Swiper{width}</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>
           </View>
        )
    }
}

const styles = StyleSheet.create({
    wrapper: {
       flex: 1,
       backgroundColor:"#ff0000"

    },
    swiperView:{
        width:width,
        height:200,
        backgroundColor:"#000000"
    },
    swiperStyle:{
        backgroundColor:"#00ff00"
    },
    slide1: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#0000ff',
        flex: 1
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#0000ff',
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#0000ff',
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    }
});