RN之ScrollView

React-Native之ScrollView

ScrollView是React-Native自己包装的一个滚动视图的组件，它支持触摸事件。ScrollView实际上就是一个容器，我们可以把自己的东西通过遍历数组的方法放进这个容器内如：

import React, {Component} from 'react';
import {AppRegistry , StyleSheet, Text, View , ScrollView , Image , Alert} from 'react-native';
//导入TimerMixin
var TimerMixin = require('react-timer-mixin');
//导入图片资源
var ImageData = require('./ARC.json');
//获得屏幕宽度
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');

export default class ARC extends Component {
  //注册定时器
  //mixins:(TimerMixin);

  state={
    currentPage:0,
  }

  render () {
    return(
      
         this.scrollEnd(e)}
        >
        {this.renderAllimage()}
        
        
          {this.renderPage()}
      
      
    
    );
  }

  scrollEnd= (e)=> {
    var offsetX = e.nativeEvent.contentOffset.x;
    var currentPage = Math.floor(offsetX/width);
    this.setState({
      currentPage:currentPage,
    })
  }
  //加载所有图片
  renderAllimage= ()=> {
    //定义一个数组
    var allImages = [];
    //拿到图片数据
    var imgsArr =  ImageData.data;
    //遍历图片数据
    for(var i=0 ; i < imgsArr.length ; i++) {
      //取出单个图片数据
      var imgItem = imgsArr[i];
      //创建图片组件到数组中
      allImages.push(
        
      )
    }
    return allImages;
  }
  renderPage = ()=> {
    var style;
    var pageArr = [];
    var imgsArr = ImageData.data;
    for(var i=0 ; i < imgsArr.length ; i++) {
      style= (i==this.state.currentPage)?{color:'white'}:{color:'black'};
      //给小圆点加载对象
      pageArr.push(
        • 
      )
    }
    return pageArr;
  }
}
const styles = StyleSheet.create({
  container: {
  },
  pageViewStyle:{
    width:width,
    height:25,
    backgroundColor:'rgba(0,0,0,0.2)',
    position:'absolute',
    bottom:0,
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
  }
});

AppRegistry.registerComponent('ARC' , ()=> ARC);

ReactNative之获取ScrollView组件的滚动距离

在web经常会计算页面的滚动距离来实现一些特效，在RN中滚动效果大多是用ScrollView与ListView来实现的，它们都有一个onScroll回调函数，可以用如下方法来获得该组件的滚动距离:

{
        console.log(event.nativeEvent.contentOffset.x);//水平滚动距离
        console.log(event.nativeEvent.contentOffset.y)；//垂直滚动距离            
    }}
/>