React Native - 环境设置

简述

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

序号	软件	描述
1	NodeJS and NPM	您可以按照我们的NodeJS 环境设置教程来安装 NodeJS。

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


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

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


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

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

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

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


npm install -g react-native-cli

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


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

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

按照说明，在您的 android 设备上运行 react 本机应用程序的一种方法是使用 expo。在你的安卓设备中安装expo客户端并扫描上面获取的二维码。

如果您想使用 android studio 运行 android 模拟器，请按退出当前命令行ctrl+c.

然后，执行运行eject command作为


npm run eject

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

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

虽然您的项目成功弹出，但您可能会收到错误消息 -

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


react-native run-android

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

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

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

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

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

单击下一步按钮，您将看到一个系统映像窗口。选择x86 Images标签。

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

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

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

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

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

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

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


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

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

并且要构建应用程序修改 App.js 并且更改将在 android 模拟器上自动更新。

如果没有，点击android模拟器按ctrl+m然后，选择Enable Hot Reloading选项。