[置顶] React Native项目组织结构介绍

代码组织：

目录结构：

.
├── 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看下有没有类似的议题。实在不行就通过注释代码的方法排除。

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不遗余力的推动，相信会越来越完善的。