《ReactNative系列讲义》基础篇---06.Layout and Flexbox_react-native r.layout 是什么-CSDN博客

本文链接：https://blog.csdn.net/fsf_snail/article/details/77684636

本文介绍Flexbox布局的基础知识，包括如何定义组件的位置及其在主轴和次轴上的排列方式。通过具体的React Native代码示例展示了justifyContent和alignItems属性的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、简介

上一篇中介绍了组件尺寸的定义方式，今天聊聊组件位置的定义方式。首先是在父组件中确定子组件的布局方式，然后选择子组件在主轴上的排列方式和次轴的排列方式。Flexbox的设计初衷是为了使布局适应不同尺寸的屏幕。除个别例外，其他的方面都和CSS中的思想保持一致。

二、基础知识

flexDirection：决定主轴的布局方式；两种布局方式：横向(row)和纵向(column)；默认是纵向，这也是和CSS中不同的方面之一。
justifyContent：决定子元素在主轴上的分布样式；五种样式：flex-start, center, flex-end, space-around, space-between
alignItems：决定子元素在次轴上的分布方式；四种样式：flex-start, center, flex-end, stretch（注：使用stretch属性时，子组件在次轴上不能有固定的尺寸）
flex：只支持单个号码；这也是和CSS的不同之处。

三、应用

import React, { Component } from 'react';
import { View } from 'react-native';

export default class JustifyContentBasics extends Component {
  render() {
    return (
      // 主轴方向是纵向
      // 在纵向方向子元素均分主轴屏幕的可见长度
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <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>
    );
  }
};

justifyContent: flex-start 主轴的起点
justifyContent: center 主轴的中心
justifyContent: flex-end 主轴的末尾
justifyContent: space-around 延主轴方向子元素左右等距分布
justifyContent: space-between 延主轴方向均分主轴

import React, { Component } from 'react';
import { View } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      // 主轴方向是纵向
      // 主轴方向居中
      // 次轴方向居中
      // 最终效果：所有的子元素聚集在屏幕中央
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        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>
    );
  }
};

alignItems: flex-start 次轴的起点
alignItems: center 次轴的中心
alignItems: flex-end 次轴的末尾
alignItems: stretch 延伸，即充满可充满的空间，有些类似flex，不过stretch更加灵活；该属性在使用的时候不可在次轴方向设置该子元素的宽度