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下载