如何在 React Native 中使用 Flexbox？

Flexbox 用于为布局提供一致性。它用于使布局适应运行它的设备的屏幕尺寸。使用 flexbox 设计，您可以指定布局的某个元素将跨越可用空间的这一部分。

在 React Native 中，Flexbox 与基本 CSS 相同。唯一的区别在于默认值。

flexDirection： CSS 的默认值为row而 React Native 的默认值为column 。
alignContent： CSS 的默认值是stretch ，React Native 的默认值是flex-start 。
flexShrink： CSS 的默认值为 1，而 React Native 的默认值为 0。

现在让我们从实现开始：

第 1 步：打开终端并通过以下命令安装 expo-cli。
```
npm install -g expo-cli
```
第2步：现在通过以下命令创建一个项目。
```
expo init AwesomeProject
```
第 3 步：现在进入您的项目文件夹，即 AwesomeProject
```
cd AwesomeProject
```

项目结构：它看起来像这样。

项目结构

Flex 属性： Flex 属性将定义布局中的组件如何跨越主轴的可用空间，默认情况下是一列。空间将按照每个元素的 flex 属性的比例进行划分。

示例：在App.js文件中写下以下代码。

App.js

import React from 'react';
import {View } from 'react-native';
  
export default function App() {
  return (
    
        
        
        
      
  );
}

App.js

import React from 'react';
import {View } from 'react-native';
  
export default function App() {
  return (
    
        
        
        
      
  );
}

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

输出

Flex Direction 属性： flexDirection属性控制节点的子节点的布局方向，即主轴。下面给出了四种类型的 flexDirection：

列（默认值）：这以垂直方式从上到下对齐子级。
行：这以水平方式从左到右对齐子级。
column-reverse：这将孩子在垂直空间中从下到上对齐。
row-reverse：这将孩子在水平空间中从右到左对齐。

示例：在App.js文件中写下以下代码。

应用程序.js

import React from 'react';
import {View } from 'react-native';
  
export default function App() {
  return (
    
        
        
        
      
  );
}

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

输出

参考： https://reactnative.dev/docs/flexbox