代码组织：
目录结构：
代码语言：javascript复制.
├── components //组成应用的各个组件
│ ├── Routers.android.js //每个组件若实现不一样，分为android的实现和ios的实现。
│ ├── Routers.ios.js
│ ├── common //公共组件
│ ├── issues //议题页面
│ ├── navigation //导航组件，android用侧边栏，ios准备用tab
│ └── project //项目页面
└── network //网络服务
└── DataService.js- 我自己的代码全部放在src目录下，这样写代码过程中搜索啊什么操作比较方便，从逻辑上也比较清晰。
- react的应用，是用自定义组件或原生组件层层嵌套而成的。因此我将整个应用划分为组件部分（组成各个页面）和一些其他服务（目前比较简单，只抽象出发get请求的网络服务）。
- components内，根据自己的业务逻辑进行抽象，把整个应用划分为层层嵌套的组件，目录结构的组织形式基本就是我页面的组织形式。如果有一些比较通用的功能，可以提取成公共组件，我放在common目录下。
- 每个组件如果ios和android的实现不太一样，则创建两个文件，如Routers.android.js和Routers.ios.js。
基本逻辑：
- 根组件：
我定义了一个Routers组件，作为整个app的根组件。Router组件实际上包装的官方的Navigator组件，主要作用：
- 负责整个app的所有路由，当使用navigator去跳转路由时，会最终进入renderScene函数来渲染不同的页面。
- 提供了默认router，整个程序启动时，默认加载页面ProjectList。
- 各个页面：不同路由对应不同的页面，如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。
- 槽点：
- 在浏览器改动css后，模拟器的布局不跟着更新。注意每个dom都有个RN的包裹，需要更改这个以RCT开头的包裹元素。参考issue。
- 浏览器的dom和手机上的元素位置对不准确。我有时会分不清哪个dom对应我屏幕哪一块。
- 调试经常失效，调试窗口的react页签动不动就找不到了，我大部分时候是直接改代码，在模拟器看效果的。
遇到的坑：
- 模拟器中的程序经常崩溃，代码语法有低级错误，一但
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的有些组件有些限制，往往是后知后觉。例如：
- DrawerLayoutAndroid这个组件外面不能再包一个
<View></View>。如果你不幸这么做了，会整个页面不显示了，而没有任何提示。。。 - 如果ListView包在一个View中，那么外面这个View需要设置style={flex: 1}。否则ListView将不能滚动。
- 当遇到这种问题，最好去google一下，或去github看下有没有类似的议题。实在不行就通过注释代码的方法排除。
- DrawerLayoutAndroid这个组件外面不能再包一个
- JSX的语法经常搞错,跟一般的模板语言不太一样。比如:
renderProject: function(project){
return(
<ProjectCell
onSelect={() => this.selectProject(project)}
project={project}/>
);
},我会经常忘记这是个函数，而直接写成:
代码语言：javascript复制renderProject: function(project){
<ProjectCell
onSelect={() => this.selectProject(project)}
project={project}/>
},这看上去没什么，问题是这种类似错误的提示很奇怪，不好定位。
总结：
RN在android上确实不太完善，调试工具，错误提示，文档等都不是很友好。但去学习下还是挺酷的，而且在facebook不遗余力的推动，相信会越来越完善的。
