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(
      <View style={styles.container}>
        <ScrollView
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          pagingEnabled={true}
          onMomentumScrollEnd ={(e)=> this.scrollEnd(e)}
        >
        {this.renderAllimage()}
        </ScrollView>
        <View style={styles.pageViewStyle}>
          {this.renderPage()}
      </View>
      
    </View>
    );
  }

  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(
        <Image
          key={i}
          source={{uri:imgItem.img}}
          style={{width:width , height:160}}
        />
      )
    }
    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(
        <Text
          key={i}
          style={[{fontSize:25} , style]}
        >&bull; </Text>
      )
    }
    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回调函数，可以用如下方法来获得该组件的滚动距离:

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