React Native 环境搭建 初始化项目 运行 调试

关于RN，前些日子写过一篇初始化项目的，本文在项目已经构建完毕基础上，下面贴出上篇文章连接：

Hello RN

按照上面文章走过一遍之后我们应该就运行起来了，但是RN的开发IDE用什么呢？

看过一些文章，也做过一些尝试：

1.官方推荐是ATMO+Nuclide。百度搜Atom官网，去下载即可，下载之后打开安装几个开发常用的插件：

open-in-browser

autocomplete-paths

atom-html-preview

2.WebStorm（个人比较喜欢他们公司的几款软件），但是还是不如下面这个方便，快捷。

3.Sublime Text 3.这个就厉害了，确实很方便。只需要安装几个插件：

ReactJS : 支持React开发，代码提示，高亮显示

Emmet ：前端开发必备。

Terminal : 在sublime中打开终端并定位到当前目录，神器，mac下的快捷键为：command+shift+T

具体安装步骤参考下面大神的博客：

Sublime 插件安装

其中静态代码检查那里有些问题，请看下面大神的文章，写的很详细，有问题我们再来讨论。

静态代码检查插件配置

下面就是我用Sublime打开我的项目之后目录：

这时候我们要运行我们的项目，前提你安装过上面的一个插件（Terminal）后，按command+shift+T，就会打开终端，直接进入到你项目目录下。

没安装也不要紧，打开终端一步两步一步两步进入到你项目目录下。

此时，我们先运行到iOS模拟器上：

终端输入react-native run-ios回车，等待编译，就可以运行到我们ios模拟器上了。

这时候我们改变目录最外层的index.ios.js文件中的代码：

只改了原来的几句话。

现在想刷新模拟器上我们已经运行的项目按照原生开发就是：

重新编译运行，而RN我们只需要在模拟器上（iOS）按command+r即可。

如果不好使，你检查下你模拟器的键盘响应是否关了，下图：

这样随时就可以刷新我们的应用了。

下面看看Android，由于本人电脑内存快满了，所以卸载了很多应用（包括Android的genymotion），所以我用的是真机。

连接好电脑之后，在刚才的终端输入：react-native run-android 回车 编译。

运行到手机之后，刚才我们在index.ios.js文件里改了几句话，现在我们在index.android.js文件中随便也改几句。

这时候刷新就是，晃动真机的屏幕，会出现一个弹窗，第一个选项就是Reload，刷新！！！！

可能会遇到红屏幕的一个错误 could not connect to development server。

需要我们给应用设置一下本机ip：8081

下面贴出mac获取本机ip方法，新建个终端窗口，输入：

ifconfig | grep "inet " | grep -v 127.0.0.1

就出来了。

然后怎么设置呢？还是晃动手机屏幕，菜单里Dev Settings ----> Debug server host & port for device

点击之后会有个输入的弹窗，你输入你刚才获取的本机的ip:8081。

确定之后返回返回返回，重新Reload。好了！！！！

最后贴出中文官网：

中文官网

这两篇主要记录下开发前期的一些小操作。