最近老大想接了个项目 想让我们 通过React Native 来实现 等技术成熟后 把我们自己的APP 也通过React Native 来实现 这样既可以实现跨平台 又可以 实现热更新。
所以，近期看了React Native 中文网 开始尝试着写一点小功能的东西试试
闲话少叙 今天先从 ScrollView 开始：
1、ScrollView介绍：ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动（默认），还能水平滚动（通过horizontal属性来设置）。
2、ScrollView常用属性：
-
horizontal（布尔值）：当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。
-
showsHorizontalScrollIndicator（布尔值）：当此属性为true的时候，显示一个水平方向的滚动条。
-
showsVerticalScrollIndicator（布尔值）：与showsHorizontalScrollIndicator相对，当此属性为true的时候，显示一个垂直方向的滚动条。
-
OnMomentumScrollEnd（function） ：当一帧滚动完毕的时候调用，e.nativeEvent.contentOffset，可以用来获取偏移量。
-
onScrollBeginDrag（function） ：当开始手动拖拽的时候调用。
-
onScrollEndDrag（function） ：当结束手动拖拽的时候调用。
-
onScroll（function） ：在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。
3、基于ScrollView的轮播图demo实例
import React, { Component } from 'react'; import { StyleSheet, Text, View, ScrollView, Image, } from 'react-native'; //引入数据 let ImageData = require('../Resource/imgData.json'); let Dimensions = require('Dimensions'); let {width, height} = Dimensions.get('window'); export default class CirculateView extends Component { // 常量 // props // // ES6中需要用在constructor中有super(props)来传递props。 // ES6中getDefaultProps是class的属性而不是方法，不能定义在组件内部，需要单独写在外面。 // 同理，ES6中propTypes也需要写在外面。 //defaultProps static defaultProps = { //每隔多少秒执行一次 duration:2000 } //设置可变值和初始值 // getInitialState(){ //ES5模式 // return { // // 当前页 // currentPage: 0 // } // } constructor(props) { // 构造函数 super(props); //ES6模式 this.state = { currentPage: 0 }; } // 开始拖拽时调用 onScrollerBeginDrag(){ // 停止定时器 clearInterval(this.timer); } // 停止拖拽时调用 onScrollEndDrag(){ // 开启定时器 this.startTime(); } // 复杂操作 componentDidMount() { // debugger // 开启定时器 this.startTime(); } // 开启定时器 startTime(){ // 1.拿到scrollerView let scrollerView = this.refs.scrollerView; let imageCount = ImageData.data.length; // 2.添加定时器 // 2.1 设置圆点 let activePage = 0; this.timer = setInterval(() => { // 2.2 判断 if((this.state.currentPage+1) >= imageCount){ activePage = 0; }else { activePage = this.state.currentPage+1; } // 2.3 更新状态机 this.setState({ // 当前页 currentPage: activePage }) // 2.4 让scrollerVeiw滚动起来 let offsetX = activePage * width; scrollerView.scrollTo({x: offsetX, y:0, animated:true}); }, this.props.duration); } render(){ return( <View style={styles.circulateViewStyle}> <ScrollView ref="scrollerView" style={styles.scrollViewStyle} // 水平滚动 horizontal={true} // 是否显示水平滚动条 showsHorizontalScrollIndicator={false} // 安页滚动 pagingEnabled={true} //滚动动画结束时调用此函数 onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)} //开始拖拽 onScrollBeginDrag={(e)=>this.onScrollerBeginDrag(e)} //停止拖拽 onScrollEndDrag={(e)=>this.onScrollEndDrag(e)} > {this.creatImages()} </ScrollView> {/*底部页面指示器*/} <View style={styles.pageViewStyle}> {/*返回5个圆点*/} {this.renderPageIndex()} </View> </View> ); } //返回所有的图片 creatImages(){ //数组 let allImage = []; //拿到图形数组 let imageArrs = ImageData.data; //遍历 for (var i = 0; i < imageArrs.length; i++){ //取出每一个单独的对象 var imageItem = imageArrs[i]; //创建组件放入数组 allImage.push( <Image key={i} source={ {uri: imageItem.img}} style={styles.imageStyle} > </Image> ); } // 返回数组 return allImage; } // 返回页面指示器的圆点 renderPageIndex(){ // 数组 let indicatorArr = []; //拿到图形数组 let imageArrs = ImageData.data; //样式 var style; //遍历 for (var i = 0; i < imageArrs.length; i++){ // 判断 style = (i==this.state.currentPage) ? {color: 'orange'} : {color: '#E8E8E8'} //放入圆点 indicatorArr.push( // 多个样式使用[]数组来放 <Text key={i} style={[{fontSize:25}, style]}>•</Text> ); } //返回 return indicatorArr; } // 当一帧滚动结束的时候调用 onAnimationEnd(e){ // 1.求出水平方向的偏移量 var offsetX = e.nativeEvent.contentOffset.x; // 2.求出当前的页数 floor函数 取整 var currentPage = Math.floor(offsetX / width); // 3.更新状态机 this.setState({ // 当前页 currentPage: currentPage }) } } const styles = StyleSheet.create({ circulateViewStyle: { marginTop:20, height:150, width:width, }, scrollViewStyle:{ }, imageStyle: { width: width, height: 150 }, pageViewStyle: { width:width, height:25, backgroundColor:'rgba(0, 0, 0, 0.4)', position:'absolute', bottom:0, flexDirection:'row', alignItems:'center' } });
4、数据支持json数据
{ "data": [ { "img":"img0", "title":"你那一笑倾国倾城" }, { "img":"img1", "title":"那里记录了最唯美的爱情故事" }, { "img":"img2", "title":"我怎么是个剩女" }, { "img":"img3", "title":"生命中最后的四分钟" }, { "img":"img4", "title":"我们都需要治疗" }, { "img":"img5", "title":"这是一个美好的开始" }, { "img":"img6", "title":"最后的晚宴" } ] }5、效果图
