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

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

猜你喜欢