在windows上搭建react-native开发环境环境

作者 likaiqiang 日期 2018-05-02
在windows上搭建react-native开发环境环境

基础环境搭建

参考视频

你需要安装python2、node、git、react-native-cli、java以及Android Studio,其中Android Studio是最难搞定的,你可能需要翻墙才能下载到某些组件,如果你和我一样用的都是Shadowsocks,可以这样配置,让Android Studio的下载走代理。

不想麻烦的可以试试create-react-native-app

安装android模拟器

react官方推荐Genymotion,不知道为什么,Genymotion在我电脑上只成功运行过一次。没办法,只能求助于各种国产安卓模拟器,像什么海马、夜神、逍遥等等。

我用的是逍遥安卓模拟器。模拟器安装成功并且启动后,命令行输入 adb connect 127.0.0.1:21503,21503是逍遥安卓模拟器的端口,同理,其他五花八门的模拟器,只要知道他们各自的端口,也可以用这条命令连接。

adb connect 成功后启动你的react-native项目(react-native run-android),你的rn项目就在模拟器里面启动了。如果遇到下面的错误:

打开摇一摇

然后出现下图,点击Dev Settings

出现下图,点击红框处

出现下图,填写你的ip(可用ipconfig查看)和端口号8081

如何调试

工欲善其事必先利其器,学习一门语言之前,先要学会如何调试这门语言

调试javascript

选择上图红框处,浏览器打开http://localhost:8081/debugger-ui, 然后打开控制台,打断点、console.log什么的就和使用chrome一样了。

调试UI

官方推荐atom + nuclide

这种方法我没有成功,主要问题还是墙的问题,挂ss都搞不定。我用的是react-devtools。

cnpm i -g react-devtools 全局安装react-devtools

在项目根目录执行react-devtools。