ReactNative之Flex布局
一般使用ReactNative开发App,一般都采用Flex布局，使用这套布局就非常快。
Flex简介
Flex又叫弹性布局，会把当前组件看做一个容器，他的所有子组件都是他容器中的成员，通过Flex，就能迅速的布局容器中的成员。
使用场景：当想快速布局一个组件中所有子组件的时候，可以使用Flex布局
Flex主轴和侧轴
Flex中有两个主要的概念：主轴和侧轴
主轴与侧轴的关系：相互垂直的。
主轴：决定容器中子组件默认的布局方向：水平，垂直
侧轴：决定容器中子组件与主轴垂直的布局方向比如主轴水平，那么子组件默认就是水平布局排布，侧轴就是控制子组件在垂直方向的布局
flexDirection属性
flexDirection:决定主轴的方向，水平或者垂直，这样子组件就会水平排布或者垂直排布
flexDirection共有四个值，在RN中默认为column。
row（默认值）：主轴为水平方向，从左向右。依次排列row-reverse：主轴为水平方向，从右向左依次排列column：主轴为垂直方向，默认的排列方式，从上向下排列column-reverse：主轴为垂直方向，从下向上排列
使用:
export default class ReactDemo extends Component {
render() {
return (
<View style={styles.rootView}>
<Text style={[styles.text1Style,styles.baseTextStyle]}>1</Text>
<Text style={[styles.text1Style,styles.baseTextStyle]}>2</Text>
<Text style={[styles.text2Style,styles.baseTextStyle]}>3</Text>
<Text style={[styles.text3Style,styles.baseTextStyle]}>4</Text>
</View>
);
}
}
const styles = StyleSheet.create({
rootView:{backgroundColor:'darkorange', flex:1, flexDirection:'row'
},
baseTextStyle:{ backgroundColor:'deepskyblue', width:50, height:50,
fontSize:15, textAlign:'center', margin:20}
}
);
效果：
row
row.png
row-reverse
row-reverse.png
column
column.png
column-reverse
column-reverse .png
flexWrap属性
flexWrap:决定子控件在父视图内是否允许多行排列。
flexWrap共有两个值，默认为nowrap。
nowrap 组件只排列在一行上，可能导致溢出。wrap 组件在一行排列不下时，就进行多行排列
使用
render() {
return (
<View style={styles.rootView}>
<Text style={[styles.text1Style,styles.baseTextStyle]}>1</Text>
<Text style={[styles.text1Style,styles.baseTextStyle]}>2</Text>
<Text style={[styles.text2Style,styles.baseTextStyle]}>3</Text>
<Text style={[styles.text3Style,styles.baseTextStyle]}>4</Text>
</View> );
}
}
const styles = StyleSheet.create({
rootView:{ backgroundColor:'darkorange', flex:1, flexDirection:'row',
flexWrap:'wrap' }, baseTextStyle:{ backgroundColor:'deepskyblue',
width:75, height:50, fontSize:15, textAlign:'center', margin:20,
}});
效果
nowrap
nowrap.png
wrap
wrap.png
justifyContent
justifyContent:决定子组件在主轴中具体布局，是靠左，还是居中等
justifyContent共有五个值，默认为flex-start
flex-start: 子组件向主轴起点对齐，如果主轴水平，从左开始，主轴垂直，从上开始。flex-end 子组件向主轴终点对齐，如果主轴水平，从右开始，主轴垂直，从下开始。center 居中显示，注意：并不是让某一个子组件居中，而是整体有居中效果space-between 均匀分配,相邻元素间距离相同。每行第一个组件与行首对齐，每行最后一个组件与行尾对齐。space-around 均匀分配,相邻元素间距离相同。每行第一个组件到行首的距离和每行最后一个组件到行尾的距离将会是相邻元素之间距离的一半
使用
export default class ReactDemo extends Component {
render() {
return (
<View style={styles.rootView}>
<Text style={[styles.text1Style,styles.baseTextStyle]}>1</Text>
<Text style={[styles.text1Style,styles.baseTextStyle]}>2</Text>
<Text style={[styles.text2Style,styles.baseTextStyle]}>3</Text>
<Text style={[styles.text3Style,styles.baseTextStyle]}>4</Text>
</View> );
}}
const styles = StyleSheet.create({
rootView:{ backgroundColor:'darkorange', flex:1, flexDirection:'row',
justifyContent:'space-around' },
baseTextStyle:{ backgroundColor:'deepskyblue', width:50, height:50,
fontSize:15, textAlign:'center', marginTop:20,
}});
效果
flex-start
flex-start.png
flex-end
flex-end.png
center
center.png
space-between
space-between .png
space-around
space-around.png
alignItems
alignItems:决定子组件在测轴中具体布局一直都没有管过侧轴，如果侧轴垂直，决定子组件在上，还是下，或者居中
alignItems共有四个值，默认为stretch。
flex-start 子组件向侧轴起点对齐。flex-end 子组件向侧轴终点对齐。center 子组件在侧轴居中。stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。
使用
render(){
return (
<View style={styles.rootView}>
<Text style={[styles.text1Style,styles.baseTextStyle]}>1</Text>
<Text style={[styles.text1Style,styles.baseTextStyle]}>2</Text>
<Text style={[styles.text2Style,styles.baseTextStyle]}>3</Text>
<Text style={[styles.text3Style,styles.baseTextStyle]}>4</Text>
</View> );
}}
const styles = StyleSheet.create({
rootView:{ backgroundColor:'darkorange', flex:1, flexDirection:'row',
justifyContent:'space-around', alignItems:'stretch' },
baseTextStyle:{ backgroundColor:'deepskyblue', width:50, height:50,
fontSize:15, textAlign:'center', marginTop:20, }});
效果
flex-start
flex-start .png
flex-end
flex-end .png
center
center .png
stretch
stretch .png
alignSelf
alignSelf:自定义自己的侧轴布局，用于一个子组件设置。注意：当某个子组件不想参照默认的alignItems时，可以设置alignSelf，自定义自己的侧轴布局。
alignSelf共有五个值，默认为auto。
auto 继承它的父容器的alignItems属性。如果没有父容器则为 "stretch"flex-start 子组件向侧轴起点对齐。flex-end 子组件向侧轴终点对齐。center 子组件在侧轴居中。stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。
使用
export default class ReactDemo extends Component {
render() {
return (
<View style={styles.rootView}>
<Text style={[styles.text1Style,styles.baseTextStyle]}>1</Text>
<Text style={[styles.text2Style,styles.baseTextStyle]}>2</Text>
<Text style={[styles.text3Style,styles.baseTextStyle]}>3</Text>
<Text style={[styles.text4Style,styles.baseTextStyle]}>4</Text>
</View> );
}}
const styles = StyleSheet.create({
rootView:{ backgroundColor:'darkorange', flex:1, flexDirection:'row',
justifyContent:'space-around', alignItems:'center' },
baseTextStyle:{ backgroundColor:'deepskyblue', width:50,
height:50, fontSize:15, textAlign:'center', marginTop:20, },
text3Style:{ alignSelf:'flex-start' }
}
);
效果
alignSelf.png
flex
flex: 决定子控件在主轴中占据几等分。
flex: 任意数字，所有子控件flex相加，自己flex占总共多少，就有多少宽度.
使用
export default class ReactDemo extends Component { render() { return ( <View style={styles.rootView}> <Text style={[styles.text1Style,styles.baseTextStyle]}>1</Text> <Text style={[styles.text2Style,styles.baseTextStyle]}>2</Text> <Text style={[styles.text3Style,styles.baseTextStyle]}>3</Text> <Text style={[styles.text4Style,styles.baseTextStyle]}>4</Text> </View> ); }}const styles = StyleSheet.create({ rootView:{ backgroundColor:'darkorange', flex:1, flexDirection:'row', justifyContent:'space-around', alignItems:'center' }, baseTextStyle:{ // width:50, // height:50, fontSize:15, textAlign:'center', marginTop:20, }, text1Style:{ flex:1, backgroundColor:'red', }, text2Style:{ flex:1, backgroundColor:'deepskyblue', }, text3Style:{ flex:3, backgroundColor:'green' }, text4Style:{ flex:1, backgroundColor:'blue', }});
效果
flex.png
