Example

示例

import React, { Component } from 'react';
import {View,ScrollView,StyleSheet ,Dimensions,Text} from 'react-native';
const {width, height} = Dimensions.get('window');

export class pageComponent extends Component {
    render() {
        return (
            <ScrollView
                //  默认为垂直排列 此属性为true改为水平排列
                horizontal={true}
                //  禁用水平滚动条
                showsHorizontalScrollIndicator={false}
                //  自动分页限ios
                pagingEnabled={true}
            >
                {this.renderChildView()}
            </ScrollView>
        );
    }

    renderChildView(){
        let childs = [];
        let colors = ['#00ff00', '#ff00ff', '#0000ff', '#ffffff', '#000000'];
        // 遍历
        for(let i=0; i<5; i++){
            let viewStyle={
                backgroundColor:colors[i],
                width:width,
                height:300,
                justifyContent: 'center',
                alignItems: 'center',
            };
            let textStyle={
                fontSize:20,
                textAlign:'center',
                color:'red'
            }
            childs.push(
                //  循环排列的view中必须有唯一表示
                <View key={i} style={viewStyle}>
                    <Text style={textStyle}>{colors[i]}</Text>
                </View>
            );
        }
        // 返回数组，不然怎么显示出来
        return childs;
    }
}