React-Native 开发中ScrollView的使用和交互

React-Native很火热，而且作为移动开发者，尤其关注热更新，so本人也成功入坑RN，今天知识简单记录下ScrollView在React-Native的使用

1. 导入库

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  ScrollView,  //倒入库  Image //这里涉及到滚动，所以必须导入这个组件对应的库，不然会报错} from 'react-native';

2. 主体代码的解释

var Dimensions = require('Dimensions');var widths = Dimensions.get('window').width;
//以上两个是为了算出当前屏幕的宽，(.width/.height,需要导入Dimensions)
//引入json数据，这里的json数据格式{
"data":[
 {"icon":"img_01"
   "title":"这是图片一"
      |
      | 
}
]}
var ImageJson = require('./dataImage.json');
var ScrollViewDemo_02 = React.createClass({  //相当于一个类  //设置可变的初始值  getInitialState(){ //系统方法  return{ //实例变量和组件都需要return，变量都需要写在｛｝里    //当前的页码    currentsPss:0  }  },  render(){ 
//实例变量和组件都需要return
    return(   <View style={styles.container}>
                 // 水平滚动         //是否支持分页     <ScrollView horizontal={true} pagingEnabled={true}                 //隐藏滚动条                 showsHorizontalScrollIndicator={false}
                //ScrollView方法，当滚动完一点就调用        //ScrollView方法:当滚动动画结束时候调用                 onMomentumScrollEnd={(scrollView)=>this.onAnimationEnd(scrollView)}     > 
        //renderChildView() 一个方法，用"this."调用,在ScrollView组建里包含，因为它返回的是数组组件       {this.renderChildView()}     </ScrollView>     {/**显示指示器*/}     <View style={styles.pageControlStyle}>
      //同上       {this.renderPageCircle()}     </View>   </View>    );  },  renderChildView(){    // 数组    var allDemo = [];
    var imageData = ImageJson.data;    for(var i = 0;i<imageData.length;i++){
    // 获取json对象
      var images = imageData[i];
      //把数据放入Image组件并装入数组，最后返回      allDemo.push(
          //如果创建的组件用了循环等，建议增加一个标示key          <Image source={{uri:images.img}} key = {i} style={{ width: widths, height: 120}}/>      );    }    return allDemo;  },  //指示器的方法  renderPageCircle(){    console.log('11kkkkk');    var pageArr = [];    var styles;    var pages = ImageJson.data;    for (var i=0;i<pages.length;i++){     //this.state获取currentsPss的值      styles = (i == this.state.currentsPss)?{color:'red'} : { color:'#ffffff'};      pageArr.push(     //判断      <Text key={i} style={[{fontSize:25},styles]}>&bull;</Text>      );    }    return pageArr;  },
以上就是scrollview的简单用法，没有定时器，希望对各位有所帮助！

Demo地址:https://github.com/JuLyTay/ScrollViewDemo_02