这篇文档主要是为了帮助搭建React Native示例程序和调试环境而写。
我的环境配置:
1. Windows 10 操作系统
2. 本机已经装好了 NodeJS, Python, JDK8
3. 以官方文档 https://facebook.github.io/react-native/docs/getting-started.html 作为参考。
(https://reactnative.cn/docs/0.51/getting-started.html 这个是中文版的,基于0.51的版本,如果你没有VPN,最好按照中文文档来配置。)
4. 当前React Native 版本是0.56-RC
详细配置:
官方提供两种方式来生成React Native示例程序,一个是基于Expo,另一个是传统方式。
1. 第一种方式 Expo,比较方便快捷,但是还是有点坑的。Expo似乎是官方推荐方式。命令比较简单,跑完之后,等于在Expo这个APP的壳子里玩,感觉像个包装器。
npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start
官方文档提到:
Install the Expo client app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, follow on-screen instructions to get a link.
要求在同一个无线网络之下,我的不行啊,我笔记本是有线,手机是WIFI。命令跑完了,似乎有问题。只好下了个EXPO XDE (https://expo.io/tools#xde),比命令行启动的稍微好一点。这个XDE提供多个连接方式,我试了一下,用tunnel/localhost(点击Host)方式部署是可以的。于是连接成功了。
2. 第二种方式是传统方式。就是把之前的先决条件NodeJS, Python, JDK8装好,配置好。
然后跑下面命令:
npm install -g yarn react-native-cli
yarn是替代npm,似乎方面点,也快一点。 官方说要用Python2,不过我Python3也试过了,感觉没什么影响。
接下来就要装Android Studio了,可以安装官方文档按部就班的安装配置,最后模拟器能跑起来,然后跑过命令:
adb devices
可以看到你打开的模拟器或者连接的实体机就算OK啦。
接下来跑命令:
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
这个命令会开一个Metro Bundler在指定端口上,像一个JS server,以后debugger是要attach这个端口进行调试的。
关于端口
Expo的端口默认是19001,基本不会与其他程序冲突。
第二种方式启动的话默认端口是8081,与我本地的MaCfee端口冲突,又关不掉MaCfee,所以只好,切换端口啦。
两个地方需要改变
1. set RCT_METRO_PORT=8088
2. 手机上的调试设置,摇晃手机:
DEV Settings:
Debug server host & port for device:
localhost:8088
之后再跑,端口就变了。
调试
也有两种方式:
1. Chrome调试
在Chrome扩展里安装React Developer Tools
之后摇晃手机点击 “Debug JS Remotely”会在chrome打开页面。
2. IDE调试
我这边用的是VSCode,其他工具类似。
首先在Extensions搜索“React Native”,安装插件。
然后点击调试里的小齿轮,选择React Native
更改Settings - WORKSPACE SETTINGS:
{
"react-native.packager.port": 8088
}
点击"Attach to packager", 连接上你打开的JS server。
设置好断点,同事确定之前Chrome没有打开debug, 摇晃手机点击 “Debug JS Remotely”,可以看到进入到VSCode进行调试了。
大功告成。