1.环境搭建
我是在RN中文网上看的文档，此站是翻译了原版的文档。有一个注意点就是最上方可以选择文档版本。。。我看了好几个组件，示例代码老是报错，然后搜索相关的demo，改了好久。后来才发现我看的是0.3x的版本文档。
这里有传送门，环境搭建比较顺利。
http://reactnative.cn/docs/0.45/getting-started.html#content
2.创建新项目
安装好React Native的命令行工具后，可以使用命令行创建新的工程了。
cd Desktop
react-native init RNNavigator
现在我们在桌面新建了一个RNNavigator的工程。
cd RNNavigator
react-native run-ios
上述命令会编译工程，并且会打开一个新的命令行窗口，显示开启了react-native的一个服务，然后模拟器也会被自动调起。
- 以上是第一次运行时的步骤，理论上第一次使用run-ios编译过后，之后就只要使用
react-native start来开启服务就可以了，手动点开模拟器的APP就可以开始调试开发
当你在遇到了类似packager is still running，或者make sure you're running a packager server的报错时，就说明你已经开启了另一个应用的服务或者你没有开启此应用的服务。
所以我的理解是，调试开发的前提条件是这个步骤，应该是包含了服务的开启和JSBundle的打包，这应该也是修改js文件后可以实时刷新模拟器的实现条件。
3.IDE
这里我比较下来有vscode和webstorm可供选择，两者都提供了插件支持reactnative的开发，包括了运行程序、调试开发、代码提示、语法提醒等。
我是采用的vscode，一个轻量级的跨平台编辑器，webstorm的话我略有耳闻，在前端开发应该是比较强大的。
简单介绍下vscode的使用：
-
在侧边栏选择插件按钮，然后搜索react native（带空格），排第一的应该就是微软官方的插件，install后reload编辑器。下面是我目前安装的几个插件，接触的不是很多，也是看人家推荐的。
QQ20170620-0@2x.png
- 然后就可以在vscode中运行你的应用了，一种方式是使用
cmd+shift+p快捷键打开vscode的命令行工具，使用>react native:run ios就可以等待模拟器运行了。
另一种开始可以在下方的TERMINAL中（如果下方没有显示控制台，可以cmd+shift+y打开），输入react-native start，然后手动点开模拟器的APP。 - 此时你就可以修改js，然后去模拟器
cmd+r实时刷新界面查看效果了。当然可以在模拟器中按下cmd+d打开内置的开发菜单，打开Enable Live Reload后只要js文件保存，模拟器就会自动刷新。 - 然后是debug功能。
首先提一下，在没有vscode时，官方介绍的调试方法是cmd+d打开发开菜单，点击Debug JS Remotely后，会自动打开chrome，此时页面上是没有你的UI的，打开开发者工具就可以进行断点调试、控制台打印了。
vscode和webstorm都提供了调试功能。不然的话我调试的时候需要打开一个js的编辑器、一个模拟器、一个chrome断点调试，也许因为浏览器的控制台打印不好看， 我还会打开xcode看控制台打印。
现在只需要在vscode或者webstorm中打好断点，点击左侧调试按钮。编辑器会重新开启服务，跑起程序。这里要注意，同时只能有一端进行调试，如果你使用的是普通命令行开启的服务，那么只能使用chrome进行调试。如果你是使用vscode的run命令或者debug按钮，那就只能支持在vscode中调试，只要在模拟器中打开远程调试按钮，理论上就可以跳转到vscode中进行断点调试了。
第一次调试前需要设置配置文件，就是点击齿轮按钮，然后选择reactnative的选项就可以了，此时就会增加一个launch.json
WX20170614-165346@2x.png
当我开打开All Exceptions选项后，仍旧不会进入我的断点，但是会进入注册代码的断点，那个断点我并没有打。
1612728B@E134A172.95EF4159.jpg
搜索的国内外的资料，暂时也没有解决，而我下载人家的开源项目是，却可以进行正常的调试的。 我的工程也是init创建的，哪里的问题呢？
在使用vscode的断点调试功能时，首先你要在vscode中开启你的reactnative服务。
4.组件开发
使用ListView我是看的文档后进行的试验，在数据源的处理上卡了下，主要是通过setState来更新数据源，获取接口数据也有对应的网络接口方面的文档。
导航控制器和tabbar在后来了解到了新出的react-navigation，这篇博客介绍的很详细。包含了tabbar、导航栏、抽屉的使用。
还有webview、refreshcontrol等，整体来说标签化的使用比较方便，具体可以下载代码。
样式布局方面，说来惭愧，仓促的看了下flexbox的属性，半猜半试的写了下，后面还是要好好学习布局、css的知识的。
效果图
5.gif
对了，没接触的同学，在下载完工程后，需要cd到目录，然后执行npm install，就是下载reactnative的所有模块包，有个package.json，里面是一些版本信息。我的理解是类似cocoapods的概念。
网友评论