如何在屏幕上居中查看组件？

视图组件是创建用户界面的基本构建块。它可以直接映射到不同平台的原生视图，如 UIView、

、android.view 等。View 组件可以由嵌套的 View 组件以及其他原生组件（子组件）组成。

方法：为了使 View 组件在屏幕上居中，我们可以使用两种方法：

• 使用 flexbox：这是用于居中任何组件/元素的最常用方法。引入 flexbox 模型是为了创建响应式布局，而不使用浮动或定位属性。要使用 flexbox 使任何组件居中，我们只需将 flex 属性以及 justifyAlign 和 alignItems 属性设置为 1。
• 使用 CSS 位置属性：位置属性在 React Native 中用于使任何组件居中的应用较少。位置属性的值设置为“绝对”，以确保它相对于最近的祖先定位。然后，将 top、bottom、left 和 right 属性设置为 0，同时将 justifyAlign 和 alignItems 属性设置为“center”。

示例：让我们通过示例来看看如何使用上述方法使 View 组件在屏幕上居中：

• 第 1 步：打开终端并通过以下命令安装 expo-cli。

  npm install -g expo-cli

• 第2步：现在通过以下命令创建一个项目。

  expo init demo-app

• 第 3 步：现在进入您的项目文件夹，即 demo-app

  cd demo-app

项目结构：项目目录应如下所示：

示例 1：使用弹性盒
我们将使用带有嵌套文本组件的单个视图组件作为其子组件。为了使 View 组件居中，我们将使用设置为 1 的 flex 属性以及 justifyAlign 和 alignItems 属性（两者都设置为 center，因为 View 组件需要在屏幕上居中）。

App.js

import React from "react";
import { View, Text, StyleSheet } from "react-native";
  
export default function App() {
  return (
    
      Center a View Component
      Using Flexbox
    
  );
}
  
const styles = StyleSheet.create({
  centered: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffc2c2",
  },
  title: {
    fontSize: 18,
    marginVertical: 2,
  },
  subtitle: {
    fontSize: 14,
    color: "#888",
  },
});

运行应用程序的步骤：使用以下命令启动服务器：

expo start

输出：

示例 2：使用 CSS 位置属性
我们将使用带有嵌套文本组件的单个视图组件作为其子组件。为了使我们的 View 组件居中，我们将使用 position 属性，该属性设置为 absolute。我们还将使用 top、bottom、left 和 right 值并将它们设置为 0（因为 View 组件需要在屏幕上居中） 和之前一样，我们还需要将 justifyAlign 和 alignItems 属性的值设置为 center .

应用程序.js

import React from "react";
import { View, Text, StyleSheet } from "react-native";
  
export default function App() {
  return (
    
      Center a View Component
      Using CSS Position property
    
  );
}
  
const styles = StyleSheet.create({
  centered: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffc2c2",
  },
  title: {
    fontSize: 18,
    marginVertical: 2,
  },
  subtitle: {
    fontSize: 14,
    color: "#888",
  },
});

运行应用程序的步骤：使用以下命令启动服务器：

expo start

输出：