reactNative基础配置

我就是我 2022-03-21 06:29 316阅读 0赞

\#React Native windows 环境配置

## java 开发环境创建 ##

链接地址 [https://blog.csdn.net/qiphon3650/article/details/84894833][https_blog.csdn.net_qiphon3650_article_details_84894833]

## Android studio 下载 ##

参考网址 [https://reactnative.cn/docs/getting-started.html][https_reactnative.cn_docs_getting-started.html]

1.  安装 Android Studio

首先下载和安装 Android Studio，国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项，确保选中了以下几项：

Android SDK  
Android SDK Platform  
Performance (Intel ® HAXM)  
Android Virtual Device  
然后点击"Next"来安装选中的组件。

1.  安装 Android SDK （sdk的路径一定要记住，这个要加环境变量的）

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 8.1 (Oreo)版本的 SDK。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。  
你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。

在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 8.1 (Oreo)选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：

Android SDK Platform 27  
Intel x86 Atom\_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）  
然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的27.0.3版本。你可以同时安装多个其他版本。

最后点击"Apply"来下载和安装这些组件。

1.  配置 ANDROID\_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID\_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录（具体的路径可能和下图不一致，请自行确认）：

> variable name -> ANDROID\_HOME  
> VARIABLE VALUE -> c:\\Users\\你的用户名\\AppData\\Local\\Android\\Sdk

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是Appearance & Behavior → System Settings → Android SDK。

你需要关闭现有的命令符提示窗口然后重新打开，这样新的环境变量才能生效。

## 创建项目 ##

> react-native init demo & cd demo

提示：你可以使用–version参数（注意是两个杠）创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

## 准备 Android 设备 ##

你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机，也可以是模拟器。后面我们所有的文档除非特别说明，并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device（简称 AVD）的模拟器。此外还有很多第三方提供的模拟器如Genymotion、BlueStack 等。一般来说官方模拟器免费、功能完整，但性能较差。第三方模拟器性能较好，但可能需要付费，或带有广告。

### 使用 Android 真机 ###

1.  开启 USB 调试  
    在默认情况下 Android 设备只能从应用市场来安装应用。你需要开启 USB 调试才能自由安装开发版本的 APP。

首先，确定你已经打开设备的 USB 调试开关。

1.  通过 USB 数据线连接设备  
    Let’s now set up an Android device to run our React Native projects. Go ahead and plug in your device via USB to your development machine.

下面检查你的设备是否能正确连接到 ADB（Android Debug Bridge），使用adb devices命令：

$ adb devices
    List of devices attached
    emulator-5554 offline   # Google emulator
    14ed2fcc device         # Physical device

在右边那列看到device说明你的设备已经被正确连接了。注意，你每次只应当连接一个设备。

译注：如果你连接了多个设备（包含模拟器在内），后续的一些操作可能会失败。拔掉不需要的设备，或者关掉模拟器，确保 adb devices 的输出只有一个是连接状态。

### 使用 Android 模拟器 ###

你可以使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备，它的图标看起来像下面这样：

Android Studio AVD Manager

如果你刚刚才安装 Android Studio，那么可能需要先创建一个虚拟设备。点击"Create Virtual Device…"，然后选择所需的设备类型并点击"Next"，然后选择Oreo API Level 27 image.

译注：请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。

如果你还没有安装 HAXM（Intel 虚拟硬件加速驱动），则先点击"Install HAXM"或是按这篇文档说明来进行安装。

然后点击"Next"和"Finish"来完成虚拟设备的创建。现在你应该可以点击虚拟设备旁的绿色三角按钮来启动它了，启动完后我们可以尝试运行应用。

## 运行项目 ##

现在你可以运行react-native run-android来在设备上安装并启动应用了。

[https_blog.csdn.net_qiphon3650_article_details_84894833]: https://blog.csdn.net/qiphon3650/article/details/84894833
[https_reactnative.cn_docs_getting-started.html]: https://reactnative.cn/docs/getting-started.html