前言
初次学习使用 React-Native,发现环境的搭建都那么繁琐啊,在自己捣鼓了很久之后也算是运行成功了,所以分享一下我的搭建过程,仅供参考
本文搭建环境是 Windows 系统和安卓手机
安装过程中主要参考 React Native 中文官网环境搭建
安装 NodeJs
Node 的安装非常简单,相信每个前端工程师都会,在这就不多写了。
使用命令行工具输入 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 Studio
Android Studio 下载地址
按照官网给出的安装教程去安装就可以了
安装 SDK
SDK 的安装可以通过 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 27
Intel 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,但官方推荐使用 Yarn
npm install -g yarn react-native-cli
安装完 yarn 后同理也要设置镜像源,提高我们的下载速度
yarn config set registry https://registry.npm.taobao.org –global
yarn 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 AwesomeProject
react-native run-android
运行以上命令之后,React Native 会自动编译并运行,但编译过程中会下载许多编译依赖的文件,这些文件如果不翻墙的话可能根本就下载不下来
分享一款翻墙软件:蓝灯 github 下载地址
我在初次运行 react-native run-android 命令时根本就下载不动那些依赖文件,但装了蓝灯过后竟然奇迹般的下载下来了,所有也是有用的啊
等编译成功后,React Native 会在你的手机上安装一个 App,就是你创建的项目,需要自己确认安装,确认后它就会自动运行了
最终的我项目也是成功的跑了起来!使用 Android Studio 和 安卓模拟器还没有跑起来,正在尝试。
结束。