|
ScrollView组件介绍与简单使用
React Native中的 ScrollView 的组件除了包装滚动平台，还集成了触摸锁定的 响应者 系统，使用的时候有几点需要注意
//ScrollView 必须有一个确定的高度才能正常工作,对于 ScrollView 来说，它就是将一些不确定高度的子组件装进确定高度的容器
//初始化的2中方式
1. 给 ScrollView 中加 [flex:1]
2. 直接给该 ScrollView 设置高度（不建议），因为它会根据内部组件自动延伸自己的尺寸到合适的大小
//ScrollView 内部的其它响应者没办法阻止 ScrollView 本身成为响应者（也就是说，ScrollView 响应的优先级比内部组件高，且内部组件没办法改变优先级）
那么就先来看看怎么创建基本的 ScrollView 视图部分
// 视图
var CustomScrollView = React.createClass({
render(){
return(
{this.renderItem()}
);
},
renderItem() {
// 数组
var itemAry = [];
// 颜色数组
var colorAry = ['gray', 'green', 'blue', 'yellow', 'black', 'orange'];
// 遍历
for (var i = 0; itrue} // 水平方向
showsHorizontalScrollIndicator={false} // 隐藏水平指示器
showsVerticalScrollIndicator={false} // 隐藏垂直指示器
pagingEnabled={true} // 开启分页功能
>
{/* 实例化内部子视图 */}
{this.renderItem()}
);
},
// scrollView子视图
renderItem() {
var itemAry = [];
// 获取json中图片
var imgAry = imageData.data;
// 根据json数据实例化视图
for (var i = 0; i/* 实例化分页指示器 */}
{this.renderPagingIndicator()}
// 分页指示器
renderPagingIndicator() {
var itemAry = [], autoColor;
// 获取json中图片
var imgAry = imageData.data;
// 根据json数据实例化视图
for (var i = 0; itrue} // 水平方向
showsHorizontalScrollIndicator={false} // 隐藏水平指示器
showsVerticalScrollIndicator={false} // 隐藏垂直指示器
pagingEnabled={true} // 开启分页功能
onMomentumScrollEnd={this.onAnimationEnd} // 当一帧滚动完毕的时候调用
>
{/* 实例化内部子视图 */}
{this.renderItem()}
{/* 实例化分页指示器 */}
{this.renderPagingIndicator()}
);
},
// 监听滚动
onAnimationEnd(e){
// 求出水平方向上的偏移量
var offSetX = e.nativeEvent.contentOffset.x;
// 计算当前页码
var currentPage = offSetX / width;
// 重新绘制UI
this.setState({
currentPage:currentPage
});
},
// 分页指示器
renderPagingIndicator() {
var itemAry = [], autoColor;
// 获取json中图片
var imgAry = imageData.data;
// 根据json数据实例化视图
for (var i = 0; i |