看到flexBox感觉非常不错,特记之，参考链接：http://www.cnblogs.com/miaomiaoshen/p/6006971.html
import React,{ Component } from 'react';
import {
AppRegistry,StyleSheet,Image,Text,View,} from 'react-native';
// 导入Dimensions库
var Dimensions = require('Dimensions');
export default class firstProgram extends Component {
render() {
// var movie = MOCKED_MOVIES_DATA[0];
return (
<View style={styles.container}>
<View style={styles.subViewStyle1}></View>
<View style={styles.subViewStyle2}></View>
<View style={styles.subViewStyle3}></View>
</View>
);
}
}
// 样式
const styles = StyleSheet.create({
container: {
backgroundColor:'blue',height:Dimensions.get('window').height,width:Dimensions.get('window').width,// 设置主轴方向
flexDirection:'row'
},subViewStyle1: {
backgroundColor:'red',height:60,width:60,},subViewStyle2: {
backgroundColor:'yellow',subViewStyle3: {
backgroundColor:'green',});
效果图：
- flexDirection（该属性决定了项目排列的方向，也就是主轴的方向）
- row：主轴为水平方向，起点在左端
// 设置主轴方向
flexDirection:'row'
效果图：
- row-reverse：主轴为水平方向，起点在右端
// 设置主轴方向
flexDirection:'row-reverse'
效果图：
- column（默认）：主轴为垂直方向，起点在上
// 设置主轴方向
flexDirection:'column'
效果图：
- column-reverse：主轴为垂直方向，起点在下
// 设置主轴方向
flexDirection:'column-reverse'
效果图：
- justifyContent（定义伸缩项目在主轴线的对齐方式）
- flex-start（默认）：伸缩项目向一行的起始位置靠齐
// 设置子项目在主轴上的对齐方式
justifyContent:'flex-start'
效果图：
- flex-end：伸缩项目向一行的结束位置靠齐
// 设置子项目在主轴上的对齐方式
justifyContent:'flex-end'
效果图：
- center：伸缩项目向一行的中间位置靠齐
// 设置子项目在主轴上的对齐方式
justifyContent:'center'
效果图：
- space-between：两端对齐，项目之间的间隔都相等
// 设置子项目在主轴上的对齐方式
justifyContent:'space-between'
效果图：
- space-around：伸缩项目会平均分布在行内，两端保留一半的空间
// 设置子项目在主轴上的对齐方式
justifyContent:'space-around'
效果图：
- alignItems（定义项目在交叉轴上如何对齐，可以把它看成侧轴（垂直于主轴）的对齐方式）
- flex-start（默认）：侧轴轴的起点对齐
// 设置项目在侧轴上如何对齐
alignItems:'flex-start'
效果图：
- flex-end：
// 设置项目在侧轴上如何对齐
alignItems:'flex-end'
效果图：
- center：侧轴的中点对齐
// 设置项目在侧轴上如何对齐
alignItems:'flex-center'
效果图：
- stretch（默认):如果项目没有设置高度或设置为 auto，将占满整个容器高度
// height:Dimensions.get('window').height,// width:Dimensions.get('window').width,// 设置项目在侧轴上如何对齐
alignItems:'flex-stretch'
效果图：
- flexWrap（默认情况下，项目都排在一条轴线上，flex-wrap属性定义如果一条轴线排不下，如何换行）
- nowrap（默认）：不换行
<View style={styles.container}>
<View style={styles.subViewStyle1}></View>
<View style={styles.subViewStyle2}></View>
<View style={styles.subViewStyle3}></View>
<View style={styles.subViewStyle1}></View>
<View style={styles.subViewStyle2}></View>
<View style={styles.subViewStyle3}></View>
<View style={styles.subViewStyle1}></View>
<View style={styles.subViewStyle2}></View>
<View style={styles.subViewStyle3}></View>
</View>
height:Dimensions.get('window').height,width:Dimensions.get('window').width,// 设置主轴方向
flexDirection:'row',// 设置换行的方式
flexWrap:'nowrap'
效果图：
- wrap：换行，第一行在上方
height:Dimensions.get('window').height,// 设置换行的方式
flexWrap:'wrap'
效果图：
alignSelf:'auto'
效果图：
- flex-start：项目从侧轴的起点开始
alignSelf:'flex-start'
效果图：
- flex-end：项目从侧轴的终点开始
alignSelf:'flex-end'
效果图：
- center：项目以侧轴的中心为参照
alignSelf:'center'
效果图：
- stretch
alignSelf:'stretch'
效果图：
