React Native开发之——组件ScrollView

前言

ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动（默认），还能水平滚动（通过horizontal属性来设置）。

组件ScrollView

属性

本文介绍一些ScrollView常用属性

• horizontal（布尔值）：当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。
• showsHorizontalScrollIndicator（布尔值）：当此属性为true的时候，显示一个水平方向的滚动条。
• showsVerticalScrollIndicator（布尔值）：与showsHorizontalScrollIndicator相对，当此属性为true的时候，显示一个垂直方向的滚动条。
• OnMomentumScrollEnd（function） ：当一帧滚动完毕的时候调用，e.nativeEvent.contentOffset，可以用来获取偏移量。
• onScrollBeginDrag（function） ：当开始手动拖拽的时候调用。
• onScrollEndDrag（function） ：当结束手动拖拽的时候调用。
• onScroll（function） ：在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。

代码实例

轮播图

export default class App extends Component<Props> 
{
	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 = constantData.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.image}} />
        	)
    	}

    	// 返回数组
   	 return itemAry;
	}
}

效果图

其他

参考：Github下载