React Native 安装与开始-JavaScript中文网-JavaScript教程资源分享门户

React Native 是一个基于 React 的 JavaScript 框架，用于构建原生的、可移植的移动应用程序。它可以让我们使用相同的代码库编写 iOS 和 Android 应用程序，并且具有强大的性能和流畅的用户体验。

要开始使用 React Native，我们需要先按照以下步骤进行安装和配置。

安装 Node.js 和 npm

React Native 需要 Node.js 环境。如果您没有安装 Node.js，请前往 https://nodejs.org/ 下载并安装最新版本。

Node.js 安装完成后，npm （Node.js 包管理器）也已经随之安装。我们可以通过运行以下命令来检查它们的版本：

node -v
npm -v

安装 React Native CLI

React Native 有一个命令行工具，称为 React Native CLI，它可以帮助我们创建和管理 React Native 项目。我们可以使用以下命令来安装 React Native CLI：

npm install -g react-native-cli

创建 React Native 项目

创建 React Native 项目非常简单。我们可以使用 React Native CLI 的 init 命令创建一个新项目。在命令行中进入您想要创建项目的目录，并运行以下命令：

react-native init AwesomeProject

在上面的命令中，AwesomeProject 是您的项目名称。

这将自动创建一个基本的 React Native 项目结构，并安装所有必需的依赖项。

运行 React Native 项目

React Native 项目有两种运行方式：使用 Xcode 或 Android Studio 运行原生应用程序，或者使用 React Native 提供的调试工具运行 JavaScript 代码。

在 iOS 模拟器中运行

如果您正在使用 Mac 并且想要在 iOS 模拟器中运行 React Native 项目，请按照以下步骤操作。

react-native run-ios

这将自动启动一个 iOS 模拟器，并在其中运行应用程序。

在 Android 模拟器中运行

如果您正在使用 Windows 或 Linux 并且想要在 Android 模拟器中运行 React Native 项目，请按照以下步骤操作。

启动 Android Studio，并确保安装了 Android SDK 和模拟器。
在终端中进入项目目录，运行以下命令：

react-native run-android

这将自动启动一个 Android 模拟器，并在其中运行应用程序。

在设备上运行

如果您想要在真实设备上运行 React Native 项目，请按照以下步骤操作。

react-native start

这将启动 React Native 提供的调试工具，并在本地服务器上运行您的项目。您可以在浏览器中访问 http://localhost:8081/debugger-ui 来查看调试工具。

打开您的应用程序，并连接到调试工具服务器。在 iOS 设备上，您可以按 Command + D 打开开发菜单，并选择 Debug JS Remotely。在 Android 设备上，您可以按 Ctrl + M 打开开发菜单，并选择 Debug JS Remotely。

示例代码

以下是一个简单的示例代码，显示了一个基本的 React Native 应用程序。

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------

------ ------- ----- --- ------- --------- -
  -------- -
    ------ -
      ----- -------- ----- -- --------------- --------- ----------- -------- ---
        ------------ ----- --------------
      -------
    --
  -
-

在上面的代码中，我们导入了 React 和 React Native 的核心组件，并创建了一个名为 App 的类组件。该组件返回了一个包含一个文本元素的视图，并设置了样式以在屏幕中居中显示。

结论

通过安装 React Native 和配置您的开发环境，您已经准备好开始编写原生的移动应用程序了。React Native 是一个强大且易于使用的工具，可让我们通过 JavaScript 编写高性能和流畅的应用程序。提醒您随时查看 React Native 的官方文档以获取更多帮助和支持。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/674d81ddd773cf2d54cfac00