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，如果没有，请安装它们。除此之外，建议安装最新版本的纱线以避免某些问题。

第 4 步：安装 React Native CLI

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

npm install -g react-native-cli

第 5 步：启动 React Native

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

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退出当前命令行。

然后，执行运行弹出命令

npm run eject

这会提示您选择弹出选项，使用箭头选择第一个选项，然后按 Enter 键。

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

尽管您的项目已成功弹出，但您可能会收到如下错误 -

忽略此错误并使用以下命令为 android 运行 React Native -

react-native run-android

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

第7步：安装Android Studio

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

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

步骤 8：配置 AVD 管理器

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

步骤 9：配置 AVD 管理器

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

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

然后，选择棉花糖并单击下一步。

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

配置虚拟设备后，单击操作列下的播放按钮来启动 Android 模拟器。

第10步：运行android

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

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

在您的 Android 模拟器中，您可以看到默认应用程序的执行情况为 -

第11步：local.properties

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

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

在这里，将Tutorialspoint替换为您的用户名。

第12步：热重载

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

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