React Native 之 ScrollView

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React,{ Component } from 'react';
import {
  AppRegistry,StyleSheet,TextInput,TouchableOpacity,ScrollView,Text,View
} from 'react-native';
//获取屏幕的宽高 
let Dimensions = require('Dimensions');
let ScreenWidth = Dimensions.get('window').width;
let ScreenHeight = Dimensions.get('window').height;

export default class CQQLoginDemo extends Component {
  
  constructor(props) {
    super(props);
    this.state = {title:"常规事件",name:"name1"};
  }

  render() {
    return (
      <ScrollView 
       horizontal={true} //水平方向
       showsHorizontalScrollIndicator={false}//当值为true时显示滚动条
       pagingEnabled ={true}//当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上
       >
       {this._renderAllChild()}
       </ScrollView>
    );
  }
  
  _renderAllChild(){
    let allChallCild = [];
    let colors = ["yellow","blue","red","green","purple"];
    for(let i=0;i<5;i++){
      allChallCild.push(
        <View key={i} style={{backgroundColor:colors[i],height:100,width:ScreenWidth}}>
           <Text>{i}</Text>
        </View>
      );
    }
    return allChallCild;
  }


}

const styels = StyleSheet.create({
  continer:{
    flex: 1,//定义侧轴排列方式
    backgroundColor: '#dddddd'
  }
});

AppRegistry.registerComponent('CQQLoginDemo',() => CQQLoginDemo);