关于FlexBox的资料可以参阅这篇博文：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
ctrl+M可以呼出调试工具，开启热更新开关后，以后只要js代码有修改，保存下文件，模拟器上自动就会变化过来
只示例了官方提供的那几个，其他更多样式属性可以参阅官方文档：http://reactnative.cn/docs/0.47/layout-props.html
样式的使用
在RN里面，可以直接使用style定义一个控件的样式，例如：
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
如果某个样式多个地方需要使用，可以使用StyleSheet对样式进行抽取创建
import React, {Component} from "react";
import {AppRegistry, StyleSheet, Text, View } from "react-native";
class IndexPage extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
// 注意，这里用引号括起来的'HelloRN'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloRN', ()=>IndexPage);
1、flexDirection（相当于horizontal和vertical效果）
有4个属性值：
row：水平从左往右布局
row-reverse：//水平从右往左布局
column://垂直，从上往下布局
column-reverse://垂直，从下往上布局
使用代码：
import React, {Component} from "react";
import {AppRegistry,View } from "react-native";
class IndexPage extends Component {
render() {
return (
//flexDirection的值有：
//row：水平从左往右布局
//row-reverse：//水平从右往左布局
//column://垂直，从上往下布局
//column-reverse://垂直，从下往上布局
<View style={{flex: 0, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
}
// 注意，这里用引号括起来的'HelloRN'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloRN', ()=>IndexPage);
row
row-reverse
column
column-reverse
2、Justify Content（相当于gravity）
//flex-start（默认值）：左对齐
//flex-end：右对齐
//center： 居中
//space-between：两端对齐，项目之间的间隔都相等。
//space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
使用代码：
import React, {Component} from "react";
import {AppRegistry,View } from "react-native";
class IndexPage extends Component {
render() {
return (
//flex-start（默认值）：左对齐
//flex-end：右对齐
//center： 居中
//space-between：两端对齐，项目之间的间隔都相等。
//space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
}
// 注意，这里用引号括起来的'HelloRN'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloRN', ()=>IndexPage);
flex-start
flex-end
center
space-between
space-around
3、alignItems
//flex-start：交叉轴的起点对齐。
//flex-end：交叉轴的终点对齐。
//center：交叉轴的中点对齐。
//stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
使用代码：
import React, {Component} from "react";
import {AppRegistry,View } from "react-native";
class IndexPage extends Component {
render() {
return (
//flex-start：交叉轴的起点对齐。
//flex-end：交叉轴的终点对齐。
//center：交叉轴的中点对齐。
//stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'flex-start',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
}
// 注意，这里用引号括起来的'HelloRN'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloRN', ()=>IndexPage);
flex-start
flex-end
center
stretch
