react-native环境配置

 一、Node环境安装

下载地址:http://nodejs.cn/download/

如果用不到最新特性的话,一般选择稳定版本

但是注意,react-native要求:Node 的版本必须大于等于 10

我们点击 Windows安装包,下载完成后双击打开,一路next,最后install就好

这里推荐将安装路径放在C盘根目录,方便查看内容,当然,个人喜好,也可以默认

到此为止,node环境就搭建完成了,我们验证一下

win + R 打开运行,输入 cmd ,打开命令行,输入

node -v

一般来说,会打印出node的版本号,如果没有,请重复上面的步骤重新进行安装

这是因为刚刚安装node的时候,已经默认为我们配置了环境变量

我们打开刚刚的nodejs文件夹,会发现里面默认有两个文件

再看看node_modules这个文件夹里

有一个npm文件夹,这是nodejs的默认包管理工具

我们在控制台里再验证一下,输入

npm -v

如果这一步也成功打印出了npm版本号,那么,恭喜你,node环境已经安装成功了!



二、设置npm镜像

npm服务器架设在国外,使用的时候难免遇到网速问题,而且大部分都是网速问题,导致各种bug

那我们一般的做法就是:设置 npm 镜像。在控制台输入:

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

这样就完成了!



三、安装react-native命令行工具

在控制台输入

npm install -g react-native-cli

等待安装完成,ok



四、安装Android Studio

安装地址:https://developer.android.google.cn/studio

官方推荐的是要科学上网,但是这个网站的服务器好像是谷歌架设在国内的,轻松下载

一路next,安装完成

tips: 官方要求保证以下几项要选中,我下载的版本没有让我选,如果同学们的版本有,请保证勾选

图片来自react-native官网



五、安装安卓SDK

安装完成后我们来到欢迎页面,在点击底部"Configure",然后就能看到"SDK Manager"

图片来自react-native官网

如果同学们已经迫不及待的打开了一个react-native项目,回不到这个欢迎页了,也别慌

在顶部 tools 里也可以找到"SDK Manager",选择"SDK Platforms"选项卡

勾选右下角的“Show Package Details”,我们可以看到各个Android版本的详细信息

确保勾选了如图所示的编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK

当然,现在有更新的Android 9.+(Q)了,我是按照官网安装的,同学们也可以选择自己喜欢的版本

但是 RN 目前支持 android4.1 以上设备

点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details",展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的 28.0.3 版本

到目前为止,最新的 Android SDK Build-Tools 版本是 29.0.1

我是Android Studio 默认安装的版本,准备更新一下试试

react-native官方还推荐安装 HAXM(Intel 虚拟硬件加速驱动),我看工具里已经默认安装了,这里不管

最后,点击右下角的 Apply 下载安装



六、配置 ANDROID_HOME 环境变量

打开 控制面板 - 系统和安全 - 系统

这一步也可以通过 右击 计算机 - 属性 来完成

再依次点击 高级系统设置 - 高级 - 环境变量 - 新建

图片来自react-native官网

ANDROID_HOME

c:\Users\你的用户名\AppData\Local\Android\Sdk

上面是变量名,下面是变量值,如图是 Android Studio 默认的Sdk安装目录

同学们也可能不一样,具体请参照

SDK Manager” 里的 “Android SDK Location

如果同学们对 SDK 的安装路径进行过修改,那么在这一步也需要进行同样的修改

接下来,把新建的环境变量放到path里面去

%ANDROID_HOME%\platform-tools;

注意,这一步一定要万分小心谨慎,不小心删除了path里的其他内容可能导致其他应用软件失效甚至是系统崩溃,并且是很难排查的,最好添加的时候先复制一份到记事本里


最后重启控制台,因为之前的控制台里,环境变量不会生效



七、创建项目

在我们的工作台(workspace)按住 shift 右击,选择打开控制台

注意:不要再某些敏感目录(例如 System32)下执行init命令,会因为各种权限问题,导致初始化失败

在控制台输入:

react-native init 项目名称 

tips:这里的项目名称需要是驼峰式写法,否则会报错

等待项目初始化完成



八、准备android模拟器

我们先使用Android Studio提供的官方模拟器,但是感觉官方模拟器low low的,功能也不完善,后面会再出一篇讲怎么样使用第三方模拟器

在 Android Studio 顶部 tools 里找到"AVD Manager"

点击“Create Virtural Devide”按钮创建一个新的AVD(Android Virtual Device,安卓虚拟设备)


不知道选哪个,算咯,就照她推荐的,用这个Pixel2吧

TIPS:同学们先别急选,有坑!!!推荐选择 Nexus S,原因请看后面!

点击“Next”,然后点击  “Pie” 后面的 “Download”,等待图片下载完成

最后点击“finish”完成虚拟机创建,在我们的设备列表里就会多出一个新的AVD


点击 “Actions” 里面的 绿色小三角按钮,运行我们的 AVD




九、编译并运行 RN 应用

有两种方法可以做到:

1、通过命令行(推荐)

在项目目录里打开命令行,输入

react-native run-android

tips:这一步之前请确保已经有一个正在运行的模拟器,否则会报错

等待项目编译,第一次时间会长,主要还是取决于网速

这里会打开一个新的命令行窗口

同学们不要关闭它

看看我们的AVD,项目已经成功编译了!


2、通过 Android Studio

点击 File - Open,选择项目目录里的 android 文件夹,点击 OK

等待 Android Studio 为我们编译,这个时间也比较长,大家别慌

编译完成之后就可以点击 工具栏里的绿色小箭头 运行

选择AVD

点击OK,等待打包


好了,打包好了,然后,然后就没有然后了,啊啊啊啊啊。报错了


报错信息告诉我们需要运行一个 Mrtro server,叫我们运行 react-native start 命令,再想想我们第一种方式新弹出的那个控制台窗口,好的,懂了吧!我们在项目目录下打开控制台,输入:

react-native start

果然出现了和第一种方式一样的控制台信息


在AVD里连按两下R(表示RELOAD),不报错了,白屏

好吧,在Android Studio里重新运行一下项目,好了,完美启动!



十、调试

看看我们AVD里的内容:

需要“点击菜单按钮”或者是“摇晃手机”来打开控制台

tips:这就是为什么AVD要选择Nexus S的原因,因为Android Studio的模拟器大都取消了摇晃按钮和菜单按钮!

还好 Nexus S 版本有菜单键,我们点击菜单键


大家看到这里有很多功能,例如可以 点击Debug JS Remotely 来打开控制台

由于篇幅限制,这里不再详解react-native调试,以后可能会单写一篇,什么,你问啥时候?这不是看心情么~~~



十一、结语

天哪,这一篇好长啊!!自己搞的时候也确实花了很多功夫,但是还好没什么太多坑,官方文档真的很详细,点赞!!!

附上链接:https://reactnative.cn/docs/getting-started/

但是看着这个AVD,真的是,有够low,老年机既视感。。

研究研究看怎么弄第三方模拟器调试,比如夜神、逍遥之类的,明后天吧,会出个单章,敬请期待!

希望这篇文章能够帮助同学们成功爬坑,如果对您有所帮助,请关注、点赞并收藏,有其他问题也可以留言或私信,欢迎讨论!

推荐阅读更多精彩内容