React Native - 环境设置

您需要安装一些东西来设置 React Native 的环境。我们将使用 OSX 作为我们的构建平台。

步骤 1：安装 create-react-native-app

在您的系统中成功安装 NodeJS 和 NPM 后，您可以继续安装 create-react-native-app （如下所示，全局）。

C:\Users\Tutorialspoint> npm install -g create-react-native-app

步骤 2：创建项目

浏览所需文件夹并创建一个新的 React Native 项目，如下所示。

C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative

执行上述命令后，将创建一个具有指定名称的文件夹，其中包含以下内容。

步骤 3：NodeJS Python Jdk8

确保您的系统中安装了 Python NodeJS 和 jdk8，如果没有，请安装它们。除此之外，建议安装最新版本的 yarn 以避免某些问题。

步骤 4：安装 React Native CLI

您可以在 npm 上安装 react native 命令行界面，使用 install -g react-native-cli 命令，如下所示。

npm install -g react-native-cli

步骤 5：启动 react native

要验证安装，请浏览项目文件夹并尝试使用 start 命令启动项目。

C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start

如果一切顺利，您将获得如下所示的二维码。

按照说明，在您的 Android 设备上运行 React Native 应用程序的一种方法是使用 expo。在您的 Android 设备上安装 expo 客户端并扫描上面获得的二维码。

第 6 步：弹出项目

如果您想使用 Android Studio 运行 Android 模拟器，请按 ctrl+c 退出当前命令行。

然后，执行运行 eject 命令 作为

npm run eject

这会提示您弹出选项，使用箭头选择第一个并按回车键。

然后，您应该建议主屏幕上的应用程序名称以及 Android Studio 和 Xcode 项目的项目名称。

虽然您的项目已成功弹出，但您可能会收到错误 −

忽略此错误并使用以下命令运行 react native for android −

react-native run-android

但是，在此之前，您需要安装 android studio。

第 7 步：安装 Android Studio

访问网页 https://developer.android.com/studio/ 并下载 android studio。

下载安装文件后，双击它并继续安装。

步骤 8：配置 AVD 管理器

要配置 AVD 管理器，请单击菜单栏中的相应图标。

步骤 9：配置 AVD 管理器

选择设备定义，建议使用 Nexus 5X。

单击"下一步"按钮，您将看到"系统映像"窗口。选择 x86 Images 选项卡。

然后，选择 Marshmallow 并单击下一步。

最后，单击 Finish 按钮完成 AVD 配置。

配置虚拟设备后，单击 Actions 列下的播放按钮以启动您的 android 模拟器。

步骤 10：运行android

打开命令提示符，浏览您的项目文件夹，然后执行 react-native run-android 命令。

然后，您的应用程序在另一个提示符中开始执行，您可以查看其状态。

在您的 android 模拟器中，您可以看到默认应用程序的执行为 −

步骤 11：local.properties

打开项目文件夹中的 android 文件夹SampleReactNative/android（在本例中）。创建一个名为 local.properties 的文件并在其中添加以下路径。

sdk.dir = /C:\Users\Tutorialspoint\AppData\Local\Android\Sdk

此处，将 Tutorialspoint 替换为您的用户名。

步骤 12：热重载

要构建应用程序，请修改 App.js，更改将自动在 Android 模拟器上更新。

如果没有，请单击 Android 模拟器并按 ctrl+m，然后选择 启用热重载 选项。