本文记录了我搭建
React-Native
项目时踩过的坑(下称RN
),以及使用Android
真机运行RN
项目遇到的问题,供大家参考。
初始化 RN
项目
运行 react-native init [your project name]
命令在本地初始化一个 RN
项目
开启本地 RN
服务
cd
进入项目,不需要 npm install
,因为这步 react-native
已经帮你做好了。直接运行 react-native run-ios
或者 react-native run-android
,可以分别启动 RN
的 Android
版本和 iOS
版本的 RN
本地服务器。
我是在 Android 上调试,直接跑命令 react-native run-android
,这时终端会默认启动一个 node
服务进程。注意:在开发过程中,两个窗口都不要关闭,不然 JS
环境下的本地服务会断掉。
windows
环境下 Android Studio
安装
虽然你可以使用任何编辑器来开发应用(编写 js 代码),但你仍然必须安装 Android Studio
来获得编译 Android
应用所需的工具和环境。
提示:关于
Android Studio
,可以去官网,也可以去国内社区下载,如果去官网下载,国内用户必须有稳定的翻墙工具,否则在下载、安装、配置过程中会不断遭遇链接超时或断开,无法进行开发工作。
开始安装
安装 Android Virtual Device
注意:安装的时候需要选中
Android Virtual Device
安装android
虚拟设备,不然不管是真机还是模拟器都无法打开调试。
安装目录的选择
勾选不需要默认启动项 安装完成就可以启动定义安装目录,这里没什么好说的,不过需要注意尽量不要放在
C:\
盘下,因为Android
的SDK
非常吃内存。
Android Studio
了。
启动 Android Studio
构建 Android
模拟器运行环境
如果你第一次安装,系统检测不到
SDK
这时候会弹出
SDK
的安装界面,记得勾选
Android Virtual Device
,一路安装完成,直接启动
Android Studio
弹出运行界面,打开刚刚初始化完成的
RN
项目下的
android
模块。
第一次开启项目,可能会花费比较长的时间,Android Studio
右下角有进度条和 event log
,左下角有终端,能打印包安装和 tasks run
时的信息。首次系统自动安装可能会失败,需要手动点击 Install missing platforms
安装丢失的文件
等到各种依赖、编译完成,右上角的 Virtual Device
控制栏的运行按钮会高亮,选中 app
点击右侧的运行按钮,出现 Virtual Device
选择弹框,这个时候把真机用数据线接入,在真机上设置成 usb 调试数据 。如果设备接入成功,会显示机型和版本号。
选中需要运行注意:这边不推荐使用
Android Studio
自带的模拟器,一来设置麻烦,二来非常吃内存,一般情况下,同时运行Android Studio
和模拟器,CPU 几乎会被全部吃掉。
RN
的真机设备,点击 ok 就好,有的时候可能会运行不成功,后台
event log
报错,这个时候重新启动一下就好。
启动 adb
服务
JavaScript
本地服务启好,Android Studio
环境搭建好,还需要运行 adb
命令开放测试端口
ADB(Android Debug Bridge)是Android SDK中的一个工具, 使用ADB可以直接操作管理Android模拟器或者真实的Andriod设备。ADB是一个客户端-服务器端程序, 其中客户端是你用来操作的电脑, 服务器端是android设备。
还记得你安装 Android Studio
之后,安装 SDK
的目录吗?开启 windows
系统终端,cd
进入 SDK
安装目录下的 platform-tools
文件夹,运行 adb reverse tcp:8081 tcp:8081
命令指定开发端口。
注意:运行
adb
命令前需要确保Android
真机和本地服务启动在同一个网段下,简单说就是连了同一个路由器,不然无法建立连接!!
真机运行 RN
真机运行需要三者同时启动成功:
- JS 本地服务启动成功,即运行
react-native run-android
Android Studio
开发设备启动成功adb
端口配置成功
所有环境搭建完成,此时 Android
真机会自动安装 RN
项目的开发包,自动运行,如果运行成功则会出现如下初始界面:
真机调试 RN
到此为止,项目算是跑起来了,但是怎么调试呢?在真机上怎么唤出控制台呢?只要摇一摇手机即可。摇一摇手机唤出控制台如下:
来解释一下几个选项的作用:Reload
即刷整个应用,相当于杀掉进程,再重新打开。Debug JS Remotely
在 PC 浏览器上远程打开一个 JS 调试页面,打开浏览器F12
唤出控制台,能看到各种代码运行的数据,就像写webview
项目时候一样。只是如果在真机环境下,打开这个选项会变得非常卡,这个我还没有找到好的解决办法。- Enable Live Reload 开启自动更改刷新,和单纯
Reload
的区别是,能直接在当前页面刷新,不会从欢迎页再进入一次。和Enable Hot Reloading
的区别是,能够重新执行该页面的JavaScript
代码,而Enable Hot Reloading
只是更换视图层的样式,不会重新执行逻辑。 Enable Hot Reloading
热更新,搭建页面时快速看见 Ui 效果时会用- 后面的几个我也不知道干啥的,反正对于新手来说,上面四个功能足够用了。
最后,关于 RN
红屏报错的一些指导建议:
- 真机调试切记,设备和 PC 需要在同一个网段下。
- 环境跑不了,最常见的错误是
JS
本地服务没有起来,即react-native run-android
命令运行不成功,有的时候调试报错,这个服务会默认关闭,需要开发者实时查看开启的node
服务打印日志 JavaScript
代码运行有问题,各种问题,包没找到啊、变量 undefined 啊,标签未闭合之类……这种情况报错一般服务不会停,是 500 错误,一般这种运行错误,真机上的错误信息定位都比较准确,自己对应去查就好。- 如果使用
RN
的一些生态组件,比如react-navigation
导航,一定要注意版本,3.*
的版本的使用方式和2.*
略有不同,一般这种情况下,错误日志只会提示包有问题,会给出一些对应的解决方案,自己去看文档的使用方法,更新到对应版本。 - 有的时候会出现一些莫名其妙的错误,可能是包编译出错,插拔一下设备,重新走一遍流程就 OK 了。
总结
以上是我自行搭建环境时踩过的一些坑,目前看来,RN
的社区不是很好,很多问题并不完善,很多解决的方案还需要在探索中不断总结。