创建第一个 React Native App 的步骤是什么？

React Native 是 Meta Platforms, Inc 创建的开源 UI 软件框架。它用于开发适用于 Android、Android TV、iOS 等的应用程序。我们一直在寻找更短的开发周期、更快的部署时间和更好的应用性能。并且有很多混合移动框架，例如 NativeScript、React Native、 Ionic、Xamarin、PhoneGap 等。

React Native：它是 Facebook 开发的一个框架，用于在一种通用语言 JavaScript 下为 iOS 和 Android 创建原生风格的应用程序。最初，Facebook 只开发了 React Native 来支持 iOS。但是，由于最近支持 Android 操作系统，该库现在可以为这两个平台呈现移动 UI。

使用 React Native 构建非常高效且容易上瘾，但入门可能有点棘手。 React Native 使用 JavaScript 运行时 Node.js 来构建您的 JavaScript 代码。如果您还没有安装 Node.js，那么是时候安装它了！

安装：这里我们将使用 Expo CLI 版本，它可以更流畅地运行您的 React Native 应用程序。请按照以下步骤一一设置您的 React 原生环境。

世博会：它是通用 React 应用程序的框架和平台。它是一组围绕 React Native 和原生平台构建的工具和服务，可帮助您使用相同的 JavaScript/TypeScript 代码库在 iOS、Android 和 Web 应用程序上开发、构建、部署和快速迭代。

第 1 步：打开终端并运行以下命令。

npm install -g expo-cli

第 2 步：现在 expo-cli 已全局安装，因此您可以通过运行以下命令来创建项目文件夹。

expo init "projectName"

第 3 步：现在进入创建的文件夹并使用以下命令启动服务器。

cd "projectName"

执行 React-Native 程序

npm start web

项目结构：

文件夹结构

示例：在此示例中，我们只是渲染一个文本，在文本上添加一些样式，如文本颜色。

App.js

import React from "react";
import { Text, View, StyleSheet } from "react-native";
  
const App = () => {
  return (
    
      
          Welcome to React-Native
      
      
        This is your first React Native Program Geek!!!
      
    
  );
};
  
export default App;
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 8,
    backgroundColor: "white",
  },
  paragraph: {
    marginTop: "40%",
    marginLeft: 20,
    color: "green",
    textAlign: "center",
    fontWeight: "bold",
    fontSize: 30,
  },
  para: {
    marginLeft: 20,
    color: "red",
    textAlign: "center",
    fontWeight: "bold",
  },
});

输出：

文件夹结构