ScrollView综合使用实例
-
这边通过所有
ScrollView入门编程的经典案例 —— 图片轮播器更全面地理解ScrollView的使用 -
为了更贴切实际开发，这边使用JSON来包装图片数据，内容如下图
先来实例化一个ScrollView与其内部的子视图，并进行一些测试必要的设置
-
先获取json中的数据
- 接着我们来完成视图部分
pagingIndicatorStyle: {
// 背景色(使背景色为全透明)
backgroundColor:'rgba(255,255,255,0.0)',
// 尺寸
width:width,
// 主轴方向与对齐方式
flexDirection:'row',
justifyContent:'center',
// 绝对定位,使页码指示器盖在scrollView上面
position:'absolute',
bottom:0
}
// 视图
var CustomScrollView = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 实例化ScrollView */}
<ScrollView style={styles.scrollViewStyle}
horizontal={true} // 水平方向
showsHorizontalScrollIndicator={false} // 隐藏水平指示器
showsVerticalScrollIndicator={false} // 隐藏垂直指示器
pagingEnabled={true} // 开启分页功能
>
{/* 实例化内部子视图 */}
{this.renderItem()}
</ScrollView>
</View>
);
},
// scrollView子视图
renderItem() {
var itemAry = [];
// 获取json中图片
var imgAry = imageData.data;
// 根据json数据实例化视图
for (var i = 0; i<imgAry.length; i++) {
// 取出单个对象
var item = imgAry[i];
// 将子视图放进 itemAry
itemAry.push(
// 实例化子视图
<Image key={i} style={styles.itemStyle} source={{uri:item.img}} />
)
}
// 返回数组
return itemAry;
},
});
// 样式
var styles = StyleSheet.create({
container: {
backgroundColor:'white'
},
scrollViewStyle: {
// 背景色
backgroundColor:'yellow',
// 上边距
marginTop:20
},
itemStyle: {
// 尺寸
width:width,
height:200,
// 图片等比例拉伸
resizeMode:'contain'
},
});
效果：
图片轮播器肯定要有分页指示器，接下来我们就来制作
-
视图部分
{/* 实例化分页指示器 */}
<View style={styles.pagingIndicatorStyle}>
{this.renderPagingIndicator()}
</View>
// 分页指示器
renderPagingIndicator() {
var itemAry = [], autoColor;
// 获取json中图片
var imgAry = imageData.data;
// 根据json数据实例化视图
for (var i = 0; i<imgAry.length; i++) {
// 取出单个对象
var item = imgAry[i];
// 跟随当前页改变对应 点 的颜色
autoColor = (this.state.currentPage === i) ? {color:'orange'} : {color:'white'}
// 将子视图放进 itemAry
itemAry.push(
// 实例化视图
<Text key={i} style={[{fontSize:30}, autoColor]}>•</Text>
)
}
// 返回数组
return itemAry;
},
样式部分：
pagingIndicatorStyle: {
// 背景色(使背景色为全透明)
backgroundColor:'rgba(255,255,255,0.0)',
// 尺寸
width:width,
// 主轴方向与对齐方式
flexDirection:'row',
justifyContent:'center',
// 绝对定位,使页码指示器盖在scrollView上面
position:'absolute',
bottom:0
}
-
效果：
最后将完整代码放出，供参考import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ScrollView, Image } from 'react-native'; // 引入Dimensions库 var Dimensions = require('Dimensions'); var {width, height} = Dimensions.get('window'); // 获取json中的数据 var imageData = require('./Data/ImageData.json'); // 视图 var CustomScrollView = React.createClass({ // 先初始化页码,确定初始化后显示哪个页面 getInitialState(){ return{ // 初始化当前页码 currentPage:0 } }, render(){ return( <View style={styles.container}> {/* 实例化ScrollView */} <ScrollView style={styles.scrollViewStyle} horizontal={true} // 水平方向 showsHorizontalScrollIndicator={false} // 隐藏水平指示器 showsVerticalScrollIndicator={false} // 隐藏垂直指示器 pagingEnabled={true} // 开启分页功能 onMomentumScrollEnd={this.onAnimationEnd} // 当一帧滚动完毕的时候调用 > {/* 实例化内部子视图 */} {this.renderItem()} </ScrollView> {/* 实例化分页指示器 */} <View style={styles.pagingIndicatorStyle}> {this.renderPagingIndicator()} </View> </View> ); }, // 监听滚动 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<imgAry.length; i++) { // 取出单个对象 var item = imgAry[i]; // 跟随当前页改变对应 点 的颜色 autoColor = (this.state.currentPage === i) ? {color:'orange'} : {color:'white'} // 将子视图放进 itemAry itemAry.push( // 实例化视图 <Text key={i} style={[{fontSize:30}, autoColor]}>•</Text> ) } // 返回数组 return itemAry; }, // scrollView子视图 renderItem() { var itemAry = []; // 获取json中图片 var imgAry = imageData.data; // 根据json数据实例化视图 for (var i = 0; i<imgAry.length; i++) { // 取出单个对象 var item = imgAry[i]; // 将子视图放进 itemAry itemAry.push( // 实例化子视图 <Image key={i} style={styles.itemStyle} source={{uri:item.img}} /> ) } // 返回数组 return itemAry; }, }); // 样式 var styles = StyleSheet.create({ container: { backgroundColor:'white' }, scrollViewStyle: { // 背景色 backgroundColor:'yellow', // 上边距 marginTop:20 }, itemStyle: { // 尺寸 width:width, height:200, // 图片等比例拉伸 resizeMode:'contain' }, pagingIndicatorStyle: { // 背景色(使背景色为全透明) backgroundColor:'rgba(255,255,255,0.0)', // 尺寸 width:width, // 主轴方向与对齐方式 flexDirection:'row', justifyContent:'center', // 绝对定位,使页码指示器盖在scrollView上面 position:'absolute', bottom:0 } }); module.exports = CustomScrollView; 就先写到这边，如果有什么错误还请朋友们指出。