React native学习第五章：Flexbox

最新推荐文章于 2025-07-23 17:00:11 发布

小波波1992

最新推荐文章于 2025-07-23 17:00:11 发布

阅读量283

点赞数

CC 4.0 BY-SA版权

分类专栏： React Native

本文链接：https://blog.youkuaiyun.com/aa654403231/article/details/60955836

React Native 专栏收录该内容

12 篇文章

订阅专栏

我们在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