React native学习第五章：Flexbox

来源：互联网发布：qq空间怎么推广淘宝编辑：程序博客网时间：2024/06/05 05:54

我们在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。

1.Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

class TestFlexDirection extends Component{        render(){                return (                    <View style={{flex:1,flexDirection:'column'}}>                        <View style={{width:50,height:50,backgroundColor:'red'}}/>                        <View style={{width:100,height:100,backgroundColor:'blue'}}/>                        <View style={{width:50,height:150,backgroundColor:'black'}}/>                    </View>                );                     }     };

row代表着水平对齐，即其top相等，column代表着垂直对齐，即其left相等

2.Justify Content

在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

class TestFlexDirection extends Component{
        render(){
                return (
                    <View style={{flex:1,flexDirection:'column'}}>
                        <View style={{width:50,height:50,backgroundColor:'red'}}/>
                        <View style={{width:100,height:100,backgroundColor:'blue'}}/>
                        <View style={{width:50,height:150,backgroundColor:'black'}}/>
                    </View>
                );

         }
};

在column下，flex-start：

center：

flex-end：

space-between：

space-around：

当我这么修改的时候：

const styles = StyleSheet.create({           bigblue: {    color: 'blue',    fontWeight: 'bold',    fontSize: 30,  },  red: {    color: 'red',  },    sizemake:{        top:100,        left:200,            width:200,        height:300,        backgroundColor:'green',    }, });

class TestJustifyContent extends Component{           render(){                return(                       <View style={{                                flex:1,                                flexDirection:'column',                                justifyContent:'space-around',                         }}>                         <View style={styles.sizemake}/>                         <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />                        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />                      </View>                  );                            } }

3. Align Items

在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。以下面的代码为例：只有将子元素样式中的width: 50去掉之后，alignItems: 'stretch'才能生效。

class TestAlignment extends Component{        render(){                return(                    <View style={{                               flex:1,                               flexDirection:'column',                               alignItems:'center',                      }}>                     <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>                );         } }

1.center

stretch

flex-end

flex-start

0 0