React Native 模块化功能实现与编程规范

1. 模块化功能实现

1.1 功能目标

模块之间没有耦合; 因此模块与模块之间不得直接引用。
如: 模块A中的JS文件不得直接require或import模块B的JS文件。

删除某个模块，其他模块也能正常运作，不会导致崩溃。

1.2 功能实现

为实现上述功能目标，将采取以下方法实现:

ModuleA 包含页面: ScreenA1和ScreenA2，提供的接
口: getDataFromModuleA(key)，我们可在ModuleA文件夹下新建index.js来进行声明，文件结构如下:

 └── ModuleA
       ├── ScreenA1.js
       ├── ScreenA2.js
       └── index.js

index.js代码如下：

 /*
  * @providesModule ModuleA
  */
  
  function getDataFromModuleA(key) {
        return ...;
  }
  
  module.exports = {
          ScreenA1: require('./ScreenA1'),
          ScreenA2: require('./ScreenA2'),
          getDataFromModuleA,
  }

1.2.1 模块间的页面跳转

在项目中，每个页面都被赋予了navigator属性，我们利用它来做页面跳转，其中screen属性指定某个页面，props代表传递的参数。

模块内跳转:

例: ModuleA 的 ScreenA1 跳转到 ScreenA2

同一个模块内，页面可直接引用; screen一定是require之后的对象，不可以直接是ScreenA2字符串，新规定。
```
 this.props.navigator.push({
       screen:require('./ScreenA2'),
       props:{
           //需要传递的属性
       }
 })
```
模块间跳转:

例: ModuleA的ScreenA1跳转到ModuleB的ScreenB1

模块间不可以直接引用; screen一定是模块名 + . + 页面名字符串，因此这里screen为ModuleB.ScreenB1 。
```
 this.props.navigator.push({
       screen:'ModuleB.ScreenB1',
       props:{
           //需要传递的属性
       }
 })
```

2. 模块目录规范

遵循以下目录结构:

└── moduleName/              //模块目录
       ├── actions/             //存放action源码
       ├── constants/           //存放常量源码
       ├── containers/          //存放UI源码
       ⎮   ├── component/       //存放UI相关的自定义组件源码
       ⎮   └── img/             //存放UI相关的图片资源
       ├── reducers/            //存放reducer源码
       ⎮   └── index.js         //用于声明整个目录下的reducer
       └── index.js             //用于声明模块页面与接口，以及reducer

 └── moduleName/              //模块目录
       ├── constants/           //存放常量源码
       ├── containers/          //存放UI源码
       ⎮   ├── component/       //存放UI相关的自定义组件源码
       ⎮   └── img/             //存放UI相关的图片资源
       └── index.js             //用于声明模块页面与接口，方便注册

二者区别: redux含有actions和reducers文件夹。

3. 模块声明规范

Q&A

Q: 为什么要在模块下面建立index.js?

A: 因为模块化之后，模块对外声明页面与接口，以及redux在 createStore时所需要的reducer，这些声明需要写在这个文件。

Q: 到底需要声明些什么东西?

A: 1. 模块名称; 2. 模块主页与模块对外页面; 3. 模块对外接口;4. redux所需的reducer。