ReactNative-Flex(三)

1.Flex布局使用场景

• 快速布局所有子组件

2.主轴，侧轴概念

• 主轴侧轴相互垂直
• 主轴决定了子组件默认的布局方向，侧轴决定了子组件与主轴垂直的布局方向

3.属性：flexDirection

3.1.应用场景：决定主轴方向

3.2.可选值

row：水平，由左向右
row-reverse：水平，由右向左
column：垂直，由上到下
column-reverse：垂直，由下到上

3.3.代码示例

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row'
    },
 baseTextStyle:{
        backgroundColor:'deepskyblue',
        width:50,
        height:50,
        fontSize:15,
        textAlign:'center',
        margin:20,
    }
});

4.属性：flexWrap

4.1.应用场景：是否允许子控件在父视图中多行排列

4.2.可选值

nowrap：只允许单行，可能溢出
wrap：允许多行

4.3.代码示例

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row',
        flexWrap:'wrap'
    },
});

5.属性justifyContent

5.1.使用场景：子组件在主轴中具体布局

5.2.可选值

flex-start：主轴水平，从左开始，主轴垂直，从上开始
flex-end：主轴水平，从右开始，主轴垂直，从下开始
center：主轴整体居中
space-between：相邻元素间距离相同。每行第一个组件与行首对齐，每行最后一个组件与行尾对齐
space-around：相邻元素间距离相同。每行第一个组件到行首的距离和每行最后一个组件到行尾的距离，是相邻元素距离的一半

5.3.代码示例

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row',
        justifyContent:'space-around'
    },
   });

6.属性alignItems

6.1.应用场景：子组件在侧轴方向上的布局

6.2.可选值

flex-start：侧轴水平，从左开始，主轴垂直，从上开始
flex-end：侧轴水平，从右开始，主轴垂直，从下开始
center：侧轴整体居中
stretch：子组件在侧轴方向被拉伸到与容器相同的高度或宽度

6.3.代码示例

const styles = StyleSheet.create({
    rootView:{
        backgroundColor:'darkorange',
        flex:1,
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'stretch'
    },
});

7.属性alignSelf

7.1.应用场景：某个子组件不想参照默认alignItems，自定义侧轴布局

7.2.可选值

auto：继承父控件alignItems，没有父控件则自动转换为stretch
flex-start：侧轴起点对齐
flex-end：侧轴终点对齐
center：侧轴方向居中
stretch：侧轴方向拉伸

7.3.代码示例

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'
    }
});

8.属性Flex

8.1.应用场景：子组件在主轴中占据几等份

8.2.可选值为任意数字，所有子组件flex值相加为分母，自己的数为分子，即可知自己在主轴中占据比例

8.3.代码示例

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',
    }
});