==================================================================

//這裡是單獨的一個js檔案，到時直接匯入就可以用  這裡用的ES5的格式

//這裡用的定時器匯入計時器類庫 react-timer-mixin 不過建立專案的時候就已經有了，可以在你專案的node_modules這個資料夾裡面找一下有沒有react-timer-mixin，如果沒有就要自己匯入  匯入方法匯入計時器方法

==================================================================

我這裡用的輪播圖圖片時本地圖片var

如果你用的網路圖片就要網路請求然後獲得json物件

可以建立一個banner,js檔案然後把程式碼考進去

然後用的時候直接匯入這裡用的ES5的格式寫的所以匯入方式./component/banner為你banner,js檔案的路徑

var BannerDemo= require('./component/banner')

然後直接使用

輪播圖效果

===================================================================

import React, {Component} from 
 
'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image
} from 'react-native';

var datas= require('../data/banner.json')
var Dimensions=require('Dimensions')
var windowwidth=Dimensions.get('window').width
var TimerMixin=require('react-timer-mixin')


var banner
 
 = React.createClass({

    getInitialState(){
        return{
            var:currcount=0,
            var:title=datas[currcount].title,
        }
    },

    
    render(){
        return (
            <View style={styles.container}>
                <ScrollView
ref="scrollView"
horizontal={true}showsHorizontalScrollIndicator={false}pagingEnabled={true}onMomentumScrollEnd={ (e)=>this.onPageEnd(e)  }>
                    {this.creatitems()}
                </ScrollView>
                <View style={styles.viewstyle}>
                    {this.creatdot()}
                    <Text style={[{textAlign:'right',flex:1,marginRight:10,color:'red'}]}>{title}</Text>
                </View>
            </View>

        )
    },

    //定時器
mixins:[TimerMixin],
    //生命週期  耗時操作  開啟一個定時器
componentDidMount(){
        //拿到物件
var scrollView=this.refs.scrollView;

            this.setInterval(
               function () {
                   //alert("0000")
currcount+=1
if(currcount>=datas.length){
                       currcount=0
}
                   //計算位移的距離
var l=currcount*windowwidth
//設定滑動距離
scrollView.scrollResponderScrollTo({x:l,y:0, animated:true})
                   this.setState({
                       currcount:currcount,
                       title:datas[currcount].title,
                   })
               },2000)
    },
    //contentOffSet 滑動的x軸的距離
//page當前的頁數
onPageEnd(e){
        var contentOffSet = e.nativeEvent.contentOffset.x
var page = contentOffSet / windowwidth
this.setState({
            var: currcount = page,
            var: title = datas[currcount].title,
            var: dotbg='red'
})

    },


    creatitems(){
        var items=[]
        for(var i=0;i<datas.length;i++){
            var itemdata=datas[i];
            items.push(
                <Image key={i}style={styles.imagestyle}source={{uri:itemdata.icon}}></Image>
            )
        }
        return items
},

    creatdot(){
        var dots=[]
        for(var i=0;i<datas.length;i++){
            var dotbg=currcount==i ? 'white' : 'red'
dots.push(
                <Text key={i}style={[styles.textstyle,{backgroundColor:dotbg}]}></Text>
        )
        }
        return dots
}
})


const styles = StyleSheet.create({
    container: {
        width:windowwidth,
        height:120,
    },
    imagestyle:{
        width:windowwidth,
        height:120
},

    viewstyle:{
        width:windowwidth,
        height:25,
        backgroundColor:'rgba(255,255,255,0.5)',
        flexDirection:'row',
        alignItems:'center',
        position:'absolute',
        bottom:0,
        left:0
},

    textstyle:{
        width:5,
        height:5,
        borderRadius:5,
        marginLeft:8
}


});


module.exports = banner