ReactNative→banner

引入第三方库
1.cd 项目文件夹
2.terminal $ npm i react-timer-mixin --save

播放本地图

// 引入计时器库
var TimerMixin = require('react-timer-mixin');

var jsonData = require('./bags.json');
//
var Dimensions = require('Dimensions');
//
var {width} = Dimensions.get('window');

var  helloworld = React.createClass({

    // 注册计时器库
        mixins: [TimerMixin],

          // 声明常量
            getDefaultProps(){
              return{

                  duration:2000
              }
            },

            // 声明变量
            getInitialState(){

                return{

                    currentPage: 0,
                    // currentX: 0

                }
            },
            // 复杂或耗时函数
                componentDidMount(){

                    {this.startTime()};
                },

          render() {

              return (

                <View style={styles.container}>

                    <ScrollView
                        ref="scrollView"
                        horizontal={true}
                        pagingEnabled={true}
                        showsHorizontalScrollIndicator={false}
                        onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
                        onScrollBeginDrag={this.onScrollBeginDrag}
                        onScrollEndDrag={this.onScrollEndDrag}

                    >

                        {this.rederAllImage()}

                    </ScrollView>


                    <View style={styles.backView}>

                        {this.renderPoints()}

                    </View>

                     </View>
            );

          },

        // banner几个图
        rederAllImage(){
            var resultArray = [];
            //
            var images = jsonData.data;
            //
            for (var i = 0; i<images.length; i++){
            //
                var item = images[i];

                // var name = "./banner/"+i+".jpeg";

                // var name = './banner/1.jpeg';

                resultArray.push(

                   <Image key={i} source={require("./banner/1.jpeg")} style={{width: width, height: 120}} />

                );
            }

         return resultArray;
        },

        // 小圆点
        renderPoints(){
                // 原点颜色
                  var style;

                 var resultArray = [];

                var images = jsonData.data;
                //
                for (var i = 0; i<images.length; i++) {

                    style = (i == this.state.currentPage) ? {color:'orange'} : {color:'#ffffff'};

                    resultArray.push(

                        <Text key={i} style={[{fontSize: 25}, style]}>•</Text>
                    );
            }

            return resultArray;
        },

        // 滚动停止
        onAnimationEnd(e){

            var offsetX = e.nativeEvent.contentOffset.x;

            var page = Math.floor(offsetX/width);

            console.log(page);

            this.setState({

                currentPage : page

            });

        },

        // 计时器开始
        startTime(){

          this.timer = this.setInterval(function () {

                    // 1.更改小圆点
                    var activePage = 0;

                    var images = jsonData.data;

                    if (this.state.currentPage+1 >= images.length){

                        activePage = 0;
                    }else {

                        activePage = this.state.currentPage+1;
                    }

                    // 2.更改scrollview
                    var  scrollview = this.refs.scrollView;
                    var  currentX = activePage*width;

                    scrollview.scrollResponderScrollTo({x:currentX, y:0, animated:true});

                    this.setState({

                        currentPage:activePage,
                        // currentX:activePage*width
                    });


            }, this.props.duration)
        },

        // 开始拖拽
        onScrollBeginDrag(){

        this.clearInterval(this.timer);

         },
         // 停止拖拽
        onScrollEndDrag(){

            {this.startTime()};
        }
    }
);

有个疑问：1.在Image 属性source怎么很好的require图片数组名2.uri没有成功获取网络图片

解决了