一起来学习f8app(2)

客户端概要

index.ios.js
这个是ReactNative所需要的入口文件, 文件名中的”ios”标明了这是iOS客户端的入口
客户端的主体代码则放在名为"js"的这个文件夹中

让我们进入js这个文件夹中, 顺着setup.js的代码往下查找, 就不难发现各个文件的作用:

F8App.js //应用的主界面
F8Navigator.js //导航模块
FacebookSDK.js //Facebook的sdk
Playground.js //调试用的文件, 跟应用本身的功能没有关系
PushNotificationsController.js //推送中心
flow-lib.js //看起来没什么用
setup.js //整个应用模块的入口
env.js //一些公共环境变量

actions //各种action, 属与Redux架构的一个组成部分
common //通用模块
filter //Filter模块
login //登录模块
rating //Rating模块
reducers //Redux架构的一个组成部分
store //Redux架构需要的Store
tabs //Tab模块

可以简单归纳为以下三个部分:

• 程序的框架结构(Redux所需要的actions和store)
• 业务模块(导航, Tab, 登录模块)
• 其他(env.js, Playground.js)

想要更好的理解上面的这些结构, 我们还需要认识一下Redux ^[1]. 如果稍微理解了Redux, 以上的代码又可以分成:

• Redux中的View(各个模块)
• Actions(actions)
• Store(store)
• 其他(env.js, Playground.js)

注意, 随着我们深入代码, 可以发现f8app实际上使用的是React-Redux, 和Redux有一些区别.

客户端详细

首先进入入口文件 index.ios.js

'use strict';

const {AppRegistry} = require('react-native');
const setup = require('./js/setup');

AppRegistry.registerComponent('F8v2', setup);

先获得了 AppRegistry ^[2] 这个ReactNative的入口模块. 然后使用AppRegistry.registerComponent将整个应用模块注册到到ReactNative的根节点. 从AppRegistry.registerComponent的函数定义可以看出, "F8v2"作为一个标示(Tag), 用来标记所注册的模块. 而这里的setup则是整个模块的入口函数, 用来返回整个f8app这个应用.

对于新手而言, 还会注意到use strict [^use strict], 这里不做重点解释了.

接下来进入 js/setup.js 文件
setup.js文件初始化了整个应用. 其主体可以分成2个部分:

• 引入应用个各个组件(主模块F8App, FackbookSDK, ParseSDK...)
• 初始化函数
  这部分代码基本上都易于理解, 唯一的一个值得注意的地方是, 我们看到了Relay^[3]的第一次出现. 这个框架用来绑定React的数据到Facebook的GraphQL服务. 理解Relay之前可能还需要去理解一下GraphQL.

---

1. 一种架构模式, 用来做为React的补充, 解决复杂的数据来源和交互. 可以参考http://redux.js.org/
   [^use strict]: 严格模式, javascript运行在严格模式下. 诸多好处请自行查找. ↩

2. {}代表等号右边的模块中的某个指定的对象. 这里的AppRegistry是'reacti-native'这个模块中的一个属性. ↩

3. 这有一篇文章便于理解Relay http://react-china.org/t/react-relay/3254 ↩