序
基于雨点儿网，分享react-native开发android app的方法。
上篇文章《零基础用react-native开发android app》介绍了RN(react-native)的一些基本概念以及开发流程，这篇文章主要结合我的开源项目raindrop-app跟大家交流下我自己的代码组织以及开发过程中遇到的一些问题。
代码组织：
目录结构：
. ├── components //组成应用的各个组件 │ ├── Routers.android.js //每个组件若实现不一样，分为android的实现和ios的实现。 │ ├── Routers.ios.js │ ├── common //公共组件 │ ├── issues //议题页面 │ ├── navigation //导航组件，android用侧边栏，ios准备用tab │ └── project //项目页面 └── network //网络服务 └── DataService.js
react的应用，是用自定义组件或原生组件层层嵌套而成的。因此我将整个应用划分为组件部分（组成各个页面）和一些其他服务（目前比较简单，只抽象出发get请求的网络服务）。
components内，根据自己的业务逻辑进行抽象，把整个应用划分为层层嵌套的组件，目录结构的组织形式基本就是我页面的组织形式。如果有一些比较通用的功能，可以提取成公共组件，我放在common目录下。
每个组件如果ios和android的实现不太一样，则创建两个文件，如Routers.android.js和Routers.ios.js。
基本逻辑：
-
根组件：
我定义了一个Routers组件，作为整个app的根组件。Router组件实际上包装的官方的Navigator组件，主要作用： 各个页面：不同路由对应不同的页面，如Routers的renderScene函数中，每个if分支是一个页面。这些页面实际上就是一个个导出的组件。比如ProjectList组件是用来做项目列表的，但他自身又包含了一个用来渲染每个项目单元格的projectCell组件。如此，所有组件都是对上层呈现成一个统一的组件接口，对下层自己去组装多个不同组件，最终形成一个模块化的统一的app。
-
组件之间的关联：
组件之间经常会发生关联。我自己用到了以下情况：-
父改变子：
子通过state对外提供接口，父可以通过setState去改变子的状态，并让子重新渲染。state是React的一个很重要的概念。在组件上可以设一些属性，这些属性都有一个初始状态，然后用户的操作产生交互，只要是用setState去触发这个组件状态变化，则会触发这个组件重新渲染 UI 。
父直接调用子导出的方法，比如官方组件
DrawerLayoutAndroid提供的openDrawer方法。可以使用react的refs机制去调用。比如我在NavTab组件的openNavDrawer函数中，以this.refs['drawer'].openDrawer();这样的函数方式去调用。那么如何像这种方式导出自己的方法供父组件直接以函数方式调用？注意导出的方法必须是作为类方法就可以了，比如openNavDrawer这个函数就是导出给父用的。
子调用父：
这其实有点类似是反向依赖的设计模式。就是子提供触发回调的接口，但是究竟是触发后执行什么，子并不关心。比如我封装的NavToolbar（就是很多界面上面的工具条）组件的onClicked方法。很多地方的按钮都是返回上一级。 <NavToolbar ... onClicked={() => {this.props.nav.pop();}} /> 但是最底层的几个界面上的按钮，换成了弹出侧面导航条，以供切换。 <NavToolbar ... onClicked={this.onToolbarClicked} /> 对于这种情况，导航条要想抽象成公共的组件，他就不能依赖于他的父究竟是哪个界面。触发的具体动作就需要通过回调注入进来，这时就用这种方式。兄弟关系：
在共同的父中组合上面两种情况就可以了。比如ProjectList.android.js中onToolbarClicked: function (){ this.refs['navTab'].openNavDrawer(); },<NavTab ref='navTab' nav={this.props.nav}> <NavToolbar icon={"ic_menu_white"} title={'项目'} onClicked={this.onToolbarClicked} /> {content} </NavTab>其他情况：
参考这篇文章，不过目前我还没用到这种毫无关系的事件触发，所以尚未研究。
-
调试
chrome调试：
安装react dev的chrome官方插件。在手机上设置host的ip，点击start chrome debugging。 chrome会自动跳转到调试地址，在浏览器上打开调试窗口，会发现里面多了一个react页签。inspect元素：
在模拟器中打开inspect element面板，点击模拟器中的元素，chrome会跳转到对应dom。-
槽点：
遇到的坑：
模拟器中的程序经常崩溃，代码语法有低级错误，一但
reload js，程序就有很大概率崩溃，需要react-native run-android重新开始。换工程运行项目，react-native run-android 前最好关下后台，否则两个项目会互相影响。
出错提示很不完善。
比如有时我会将<View>误写成<view>，或者忘记关闭标签。而这些低级错误，RN里面往往会非常难排除，提示往往都很奇怪，我都是靠走读代码发现。
比如有一次，我看了ECMAScript 6 Features的语法后，将DataService中var SERVER = 'http://www.yudianer.com/api';这句改成了const SERVER = 'http://www.yudianer.com/api';，当时没发现什么问题。但后面发现了奇怪的问题，只有在浏览器调试的时候，app才能正常运行，否则什么也不显示，而且没有任何提示。最后打包运行无数次都没反应，只能一点一点注释代码排除，才发现是我用了ECMAScript 6 Features，却没有配置。。。-
RN的有些组件有些限制，往往是后知后觉。例如：
JSX的语法经常搞错,跟一般的模板语言不太一样。比如:
renderProject: function(project){
return(
<ProjectCell
onSelect={() => this.selectProject(project)}
project={project}/>
);
},
我会经常忘记这是个函数，而直接写成:
renderProject: function(project){
<ProjectCell
onSelect={() => this.selectProject(project)}
project={project}/>
},
总结：
RN在android上确实不太完善，调试工具，错误提示，文档等都不是很友好。但去学习下还是挺酷的，而且在facebook不遗余力的推动，相信会越来越完善的。
原文链接：https://www.f2er.com/react/307576.html