ScrollView组件
一个包装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。
- ScrollView必须有一个确定的高度才能正常工作
它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。
通常有两种做法：
第一种： 直接给该ScrollView进行设置高度(不建议)；
第二种： ScrollView中不要加{flex:1}。 - ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者
常用属性
- contentContainerStyle StyleSheetPropType(ViewStylePropTypes)
这些样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。 - horizontal bool
当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。 - OnMomentumScrollEnd function
当一帧滚动完毕的时候调用，e.nativeEvent.contentOffset。 - onScrollBeginDrag fuction
当开始手动拖拽的时候调用。 - onScrollEndDrag fuction
当结束手动拖拽的时候调用。 - showsHorizontalScrollIndicator bool
当此属性为true的时候，显示一个水平方向的滚动条。 - showsVerticalScrollIndicator bool
当此属性为true的时候，显示一个垂直方向的滚动条。 - onScroll function
在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。
用ScrollView实现一个Banner广告
先导入计时器类库
npm i react-timer-mixin --save
在项目中需要引入并注册：
引入： var TimerMixin = require('react-timer-mixin');
注册：mixins: [TimerMixin]
具体代码实现：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
// 引入计时器类库
var TimerMixin = require('react-timer-mixin');
// 引入json数据
var ImageData = require('./ImageData.json');
var App = React.createClass({
// 注册计时器
mixins: [TimerMixin],
// 设置固定值
getDefaultProps(){
return{
// 每隔多少时间
duration: 1000
}
},
// 设置可变的和初始值
getInitialState(){
return{
// 当前的页码
currentPage: 0
}
},
render(){
return(
<View style={styles.container}>
<ScrollView
ref="scrollView"
horizontal={true}
// 隐藏水平滚动条
showsHorizontalScrollIndicator={false}
// 自动分页
pagingEnabled={true}
// 当一帧滚动结束
onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
// 开始拖拽
onScrollBeginDrag={this.onScrollBeginDrag}
// 停止拖拽
onScrollEndDrag={this.onScrollEndDrag}
>
{this.renderAllImage()}
</ScrollView>
{/*返回指示器*/}
<View style={styles.pageViewStyle}>
{/*返回5个圆点*/}
{this.renderPageCircle()}
</View>
</View>
);
},
// 调用开始拖拽
onScrollBeginDrag(){
// 停止定时器
this.clearInterval(this.timer);
},
// 调用停止拖拽
onScrollEndDrag(){
// 开启定时器
this.startTimer();
},
// 实现一些复杂的操作
componentDidMount(){
// 开启定时器
this.startTimer();
},
// 开启定时器
startTimer(){
// 1. 拿到scrollView
var scrollView = this.refs.scrollView;
var imgCount = ImageData.data.length;
// 2.添加定时器 this.timer --->可以理解成一个隐式的全局变量
this.timer = this.setInterval(function () {
// 2.1 设置圆点
var activePage = 0;
// 2.2 判断
if((this.state.currentPage+1) >= imgCount){ // 越界
activePage = 0;
}else{
activePage = this.state.currentPage+1;
}
// 2.3 更新状态机
this.setState({
currentPage: activePage
});
// 2.4 让scrollView滚动起来
var offsetX = activePage * width;
scrollView.scrollResponderScrollTo({x:offsetX, y:0, animated:true});
}, this.props.duration);
},
// 返回所有的图片
renderAllImage(){
// 数组
var allImage = [];
// 拿到图像数组
var imgsArr = ImageData.data;
// 遍历
for(var i=0; i<imgsArr.length; i++){
// 取出单独的每一个对象
var imgItem = imgsArr[i];
// 创建组件装入数组
allImage.push(
<Image key={i} source={require('./image/img_01.png')} style={{width:width, height:120}}/>
);
}
// 返回数组
return allImage;
},
// 返回所有的圆点
renderPageCircle(){
// 定义一个数组放置所有的圆点
var indicatorArr = [];
var style;
// 拿到图像数组
var imgsArr = ImageData.data;
// 遍历
for(var i=0; i<imgsArr.length; i++){
// 判断
style = (i==this.state.currentPage) ? {color:'orange'} : {color:'#ffffff'};
// 把圆点装入数组
indicatorArr.push(
<Text key={i} style={[{fontSize:25},style]}>•</Text>
);
}
// 返回
return indicatorArr;
},
// 当一帧滚动结束的时候调用
onAnimationEnd(e){
// 1.求出水平方向的偏移量
var offSetX = e.nativeEvent.contentOffset.x;
// 2.求出当前的页数
var currentPage = Math.floor(offSetX / width);
// console.log(currentPage);
// 3.更新状态机,重新绘制UI
this.setState({
// 当前的页码
currentPage: currentPage
});
}
});
const styles = StyleSheet.create({
container:{
marginTop:25
},
pageViewStyle:{
width:width,
height:25,
backgroundColor:'rgba(0,0,0,0.4)',
// 定位
position:'absolute',
bottom:0,
// 设置主轴的方向
flexDirection:'row',
// 设置侧轴方向的对齐方式
alignItems:'center'
}
});
网友评论