分享本人搭建 React Native 开发环境的过程

前言初次学习使用 React-Native，发现环境的搭建都那么繁琐啊，在自己捣鼓了很久之后也算是运行成功了，所以分享一下我的搭建过程，仅供参考本文搭建环境是 Windows 系统和安卓手机安装过程中主要参考React Native 中文官网环境搭建安装 NodeJsNode 的安装非常简单，相信每个前端工程师都会，在这就不多写了。使用命令行工具输入 node -v 出现版本号则安装成功。建议大家尽量不要让自己的 Node 版本太低，保持与官网同步即可。安装 Python 2根据官网的推荐，需要安装 2.x 版本的 Python，附上官网下载地址，点击此处安装过程当中，注意勾选 Add python.exe to Path 项，它会自动为我们添加到系统的 path 环境变量当中，非常方便。当安装完成之后，打开命令行工具输入 python 回车，出现 Python 后跟版本号等等东西就安装成功了，输入 exit() 退出安装 JDK根据官网要求 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）在此分享我的 64 位安装包 链接：https://pan.baidu.com/s/1kfnG… 提取码：0jcn配置环境变量以我为例，我的 jdk 安装在 E:_\software\java\jdk1.8, jre 安装在 E:_\software\java\jre1.8打开我的电脑，在环境变量中的系统变量里，新建一个系统变量，变量名为：JAVA_HOME，变量值为：E:_\software\java\jdk1.8在 path 变量值后加入 %JAVA_HOME%\bin，手动添分号CLASSPATH 环境变量可加可不加，我的加不加都是能正常运行的加的话就再新建一个系统变量，变量名为：CLASSPATH，变量值为： .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar检验是否配置正确打开 cmd，依次输入 java，javac，java -version 检验安装 Android StudioAndroid Studio 下载地址按照官网给出的安装教程去安装就可以了安装 SDKSDK 的安装可以通过 Android Studio 去下载，默认会下载到 C 盘里，我自己在 E 盘新建了一个 SDK 的文件夹目录，然后更改了它的下载目录，下载的所有 SDK 都指定到这个文件夹里就可以了拷贝一些官网的原话Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 8.1 (Oreo)版本的 SDK你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 8.1 (Oreo)选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：Android SDK Platform 27Intel x86 Atom_64 System Image （官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的27.0.3版本。你可以同时安装多个其他版本。最后点击"Apply"来下载和安装这些组件。配置 SDK 环境变量官网只配置了一个 ANDROID_HOME 的环境变量，但是我还额外配置两个，反正我配置了这俩才能用，先依照官网配置好 ANDROID_HOME然后在 path 中新增两个地址，分别为：%ANDROID_HOME%tools%ANDROID_HOME%platform-tools请注意加分号验证 SDK 是否配置成功打开 cmd 输入 adb 命令检验，若不能使用该命令，请检查 SDK 配置。如果配置正常还不行的话，可能是电脑没有装安卓的驱动，可以下载豌豆荚进行驱动安装。创建 React-Native 项目安装 Yarn 和 React Native 的命令行工具（react-native-cli），也可以不安装 Yarn，使用 npm，但官方推荐使用 Yarnnpm install -g yarn react-native-cli安装完 yarn 后同理也要设置镜像源，提高我们的下载速度yarn config set registry https://registry.npm.taobao.org –globalyarn config set disturl https://npm.taobao.org/dist –global安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用 yarn 代替 npm install 命令，用 yarn add 某第三方库名代替 npm install 某第三方库名。创建新项目找个文件夹创建项目，文件路径不建议有中文，打开 cmd 运行以下命令，等待项目构建完成react-native init AwesomeProject利用真机运行 React-Native 项目项目构建完成后，让我们用真机测试能否正常运行准备 Android 设备使用自己的安卓手机，利用数据线连接上电脑，打开 USB 调试（怎么打开自行百度，很简单）然后通过 cmd 执行 adb devices 命令，若输出的结果中存在 devices ，那么该行就是你的设备，证明连接成功了编译并运行 React Native 应用cd AwesomeProjectreact-native run-android运行以上命令之后，React Native 会自动编译并运行，但编译过程中会下载许多编译依赖的文件，这些文件如果不翻墙的话可能根本就下载不下来分享一款翻墙软件：蓝灯 github 下载地址我在初次运行 react-native run-android 命令时根本就下载不动那些依赖文件，但装了蓝灯过后竟然奇迹般的下载下来了，所有也是有用的啊等编译成功后，React Native 会在你的手机上安装一个 App，就是你创建的项目，需要自己确认安装，确认后它就会自动运行了最终的我项目也是成功的跑了起来！使用 Android Studio 和 安卓模拟器还没有跑起来，正在尝试。结束。