React Native环境搭建各种踩坑

安装依赖

Node、React Native命令行工具、Python2、JDK、Android Studio

虽然可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

1. Node，Python2，JDK可以直接网站下载

   注意：node不要下载最新版v12，建议下载v10版本，不然会导致红屏

   点击这个下载地址下载v10版本，下载的时候找msi这种的一键安装，不用在配置什么东西了

   已经安装python3的童鞋参考：this

   JDK安装不再赘述

2. Node下载完成之后，切换一下npm源，调成国内源

   # 使用nrm工具切换淘宝源
   npx nrm use taobao
   
   # 如果之后需要切换回官方源可使用 
   npx nrm use npm
   

3. Yarn、React Native命令行工具安装

   Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

   …这个yarn暂时还不知道有啥用，问题不大装了再说

   npm install -g yarn react-native-cli
   

   安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

4. Android Studio安装

   现在基本不慌了，官网已经不被墙了，想起一年前被网络支配的恐惧，一个波动就重下

   1. 安装界面中选择"Custom"选项，确保选中了以下几项：

      • Android SDK
      • Android SDK Platform
      • Performance (Intel ® HAXM)
      • Android Virtual Device

   2. 安装 Android SDK

      Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。

      React Native 应用需要的是Android 9 (Pie)版本的 SDK

      在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 9 (Pie)选项，确保勾选了下面这些组件:

      • Android SDK Platform 28
      • Intel x86 Atom_64 System Image

      然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

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

   3. 配置 ANDROID_HOME 环境变量

      打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录

      

   4. 把 platform-tools 目录添加到环境变量 Path 中

      打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去。

      这东西就在SDK里面，在刚刚SDK目录后面加上 \platform-tools就好了

创建新项目

使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目：

react-native init AwesomeProject

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

真机运行

检查你的设备是否能正确连接到 ADB，记得打开开发者选项中的USB调试（修改权限，模拟点击那个）

$ adb devices
List of devices attached
14ed2fcc device //连接的设备

访问开发服务器

在启用开发服务器（官方名称 metro，但我们更常称之为 Packager）的情况下，你可以快速的迭代修改应用，然后在设备上立即查看结果。

adb reverse tcp:8081 tcp:8081  //真机运行需要这句，在连接到adb之后，模拟器不需要
react-native start

编译并运行 React Native 应用

确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行react-native run-android：

cd AwesomeProject
react-native run-android

如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的翻墙工具，否则将频繁遭遇链接超时和断开，导致无法运行。

react-native run-android只是运行应用的方式之一。你也可以在 Android Studio 中直接运行应用。

译注：建议在run-android成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。

遇到的问题

Android Studio初始化错误

Error: Unable to parse the react native cli configuration. The command “npx.cmd – quiet – no install react native config” should be run in the “D: \ code code” directory to output valid JSON, but not. This may be due to NPX parsing to the old global react native binary. Make sure to uninstall all global ‘react native’ binaries: ‘NPM uninstall-g react native react native cli’ and try again

避免在用户名、目录名、文件名、变量名等处使用中文、空格等特殊字符，也不要使用react、react-native等名字

手机红屏错误

Unable to load script. Make sure you’re either running a Metro server (run ‘react-native start’) or that your bundle ‘index.android.bundle’ is packaged correctly for release.

参考GitHub上的回答

• 首先检查你开发服务器metro打开了没，如果没有在项目里启动react-native start

• 然后查看Node版本是不是最新版v12，换成v10

• 如果是真机,设置adb reverse tcp:8081 tcp:8081

安装包手动删除了，但是装不上了

Error while executing: am start -n “com.myproject/com.myproject.MainActivity”

使用adb给他删删干净…

>adb uninstall com.myproject
Success