React Native Flexbox

摘要:在本教程中，您将学习如何使用 Flexbox 模型在您的移动应用程序中排列组件。

React Native 使用 Flexbox 布局算法为组件创建布局。React Native 中的 Flexbox 与 Web 中的 Flexbox 类似，但有一些细微的差异

Flex 容器和项目

当组件具有 display: 'flex' 时，它将成为一个 flex 容器。所有直接子元素将成为 flex 项目

例如

<View style={{ display: 'flex'}}>
    <Text>JS</Text>
    <Text>React</Text>
    <Text>React Native</Text>
</View>Code language: HTML, XML (xml)

在本例中，View 是一个 flex 容器，Text 组件是 flex 项目

请注意，只有 flex 容器的直接子元素是 flex 项目，而间接子元素组件不是。例如

<View style={{ display: 'flex'}}>
    <Pressable>
        <Text>JS</Text>
    </Pressable>
    <Pressable>
        <Text>React</Text>
    </Pressable>
    <Pressable>
        <Text>React Native</Text>
    </Pressable>
</View>Code language: HTML, XML (xml)

在本例中，Pressable 组件是 flex 项目，但 Text 组件不是，因为它们是 View 组件的间接子元素

在 React Native 中，以下组件默认使用 flexbox 布局。这意味着您无需显式指定 display: 'flex'

• View
• ScrollView
• SafeAreaView
• FlatList
• SectionList
• VirtualizedList

Flex 方向

Flex 布局使用两个隐式轴：主轴和交叉轴。

如果 flexDirection 设置为 'column'，则主轴为从上到下，交叉轴为从左到右

如果 flexDirection 设置为 'row'，则主轴为从左到右，交叉轴为从上到下

要有效地使用 Flexbox，您通常会结合使用 alignItems 和 flexDirection 属性。

alignItems

alignItems 在 flex 容器的交叉轴上对齐单个 flex 项目。alignItems 属性接受以下值

• stretch（默认）
• flex-start
• flex-end
• center
• baseline

stretch

alignItems stretch 将在交叉轴上拉伸所有 flex 项目。请注意，alignItems 默认值为 stretch

flex-start

当 alignItems 设置为 flex-start 时，它会将 flex 项目对齐到 flex 容器的交叉轴的开头

flex-end

如果您将 alignItems 设置为 flex-end，它会将 flex 项目对齐到 flex 容器的交叉轴的末尾

center

alignItems center 将 flex 项目放置在交叉轴的中心

以下程序说明了 alignItems

baseline

alignItems baseline 将在 flexDirection 设置为 'row' 时，将 flex 项目沿同一基线对齐

以下程序说明了 alignItems baseline

justifyContent

justifyContent 将 flex 项目作为一个组（不像 alignItems 那样是单独的项目）沿 flex 容器的主轴对齐。

justifyContent 接受以下值之一

• flex-start
• flex-end
• space-between
• space-evenly
• space-around
• center

以下应用程序说明了 justifyContent 的工作原理

flex-start

justifyContent flex-start 将 flex 项目作为一个组对齐到 flex 容器主轴的开头。

flex-end

justifyContent flex-end 将 flex 项目作为一个组对齐到 flex 容器主轴的末尾。

center

justifyContent center 将 flex 项目作为一个组对齐到 flex 容器主轴的中心。

space-between

justifyContent space-between 在 flex 容器的主轴上均匀地分布 flex 项目之间的空间

space-evenly

justifyContent space-evenly 在 flex 容器的主轴上以相等的空间排列 flex 项目，包括开始和结束。

space-around

justifyContent space-around 在 flex 容器的主轴上隔开 flex 项目，将剩余的空间分布在 flex 项目周围。

下表说明了 space-between、space-around 和 space-evenly 之间的区别

总结

• React Native 使用 flexbox 布局来排列组件。
• 使用 alignItems 在 flex 容器的交叉轴上对齐 flex 项目。
• 使用 flexDirection 在 flex 容器的主轴上对齐 flex 项目。