react-native (三 - 上) : Navigator

大家学习完了一些常用组件的应用及其布局，现在我们来了解一个单页面app才有的导航navigation

react-native version < 0.44.0版本之前提供了Navigator来制作导航，之后版本若还需要用这个导航请额外添加react-native-deprecated-custom-components 来使用navigator，官方不会再进行维护

react-native version >= 0.44.0 官方推荐使用react-navigation

navigator

我们打开src/Root/root.js

我们看到这个Navigator组件在这里赋值使用了三个属性，initialRoute，configureScene和renderScene，当然Navigator的属性远不止这些，了解navigator的属性

InitialRoute

The initial route for navigation. A route is an object that the navigator will use to identify each scene it renders. If both `initialRoute` and `initialRouteStack` props are passed to `Navigator`, then `initialRoute` must be in a route in `initialRouteStack`. If `initialRouteStack` is passed as a prop but `initialRoute` is not, then `initialRoute` will default internally to  the last item in `initialRouteStack`.

上面是官方给的解释，对于我们来说我们需要认识到initialRoute是一个对象，而这个对象是用来呈现呈现最终场景的，也就是我们能看到的那个场景.（不着急，我们等会再聊initialRouteStack）

看到我们的root.js里面的程序，我们定义了一个全局的initialRoute对象，这个对象里面包含了两个属性：id和params，我想说的是，这个两个属性并不是必须的，其实initialRoute对象的构造都是用户根据自己的需求自定义的。可能你当前路由的界面需要一个页面名字，那么你可以添加一个属性title，你想为路由的页面传递参数你可以添加一个属性名叫params或者props。

我们现在初始化好了initialRoute并且将他赋值到了Navigator元素上的initialRoute属性里，告诉组件我现在初始化要展示的页面我需要的东西都在了！ 那么Navigator是怎么做到关联到具体的对象的呢？

renderScene

Required function which renders the scene for a given route. Will be invoked with the `route` and the `navigator` object. (route, navigator) =>

按照官方的解释，这个属性是个方法，而这个方式是用来展示你用户所给的路由的，而且它会默认传递一个navigator对象。

现在请大家注释掉我们的initialRoute这个全局对象，我们重新定义一个新的初始化路由

我们只需要在这个路由里面添加一个component属性并且把login组件赋值到属性上去

再修改下我们renderScene的函数体，让它返回一个route.component。然后运行项目看看结果会怎么样。其实大家肯定也已经猜到，我们initialRoute对象在这里被当作是了route传递到了renderScene方法中，为了验证我们的猜想，我们打开浏览器的调试工具进行断点调试 。 如何调试？

看到了么？事实正如我们所猜测的一样，我们这个route里面刚好有一个属性叫Component，并且它是一个login组件。从而我们又可以大胆的猜测，我们renderScene函数是用来返回我们的组件的，至于怎么返回我们可以自己定义，并且我们还可以操作到当前的navigator这个组件。大家可以多多练习，多多调试看看具体情况。

configureScene

Optional function where you can configure scene animations and gestures. Will be invoked with `route` and `routeStack` parameters, where `route` corresponds to the current scene being rendered by the `Navigator` and `routeStack` is the set of currently mounted routes that the navigator could transition to. The function should return a scene configuration object. (route, routeStack) => Navigator.SceneConfigs.FloatFromRight

官方解释来看，这个函数是optional，这代表着这个属性不是必须赋值的。而这个函数是用来干嘛的？用来处理场景的动画和手势。它会要求两个参数route和routestack，route如同renderScene中的route一样是将要处理的界面的路由，routestack则是界面跳转关系的集合。（大胆猜测下，routestack是不是我们initialStack的产物）

同样如果你仅仅是想控制导航的动画可以直接配置枚举，你依然可以对routestack进行操作。

initialRouteStack

 Pass this in to provide a set of routes to initially mount. This prop is required if `initialRoute` is not provided to the navigator. If this prop is not passed in, it will default internally to an array containing only `initialRoute`.

我们猜对了么？

模块与模块之间的调用 （持续更新....脑子不好使了慢慢写.）

这里顺便想解释下weguess的模块调用的设计。仅仅是扩展，若想继续学习新的组件用法

react-native (三 - 下)react-navigation

其实对于app而言，模块与模块之间的调用一直是一个值得关注的问题。为什么？现在的app做的越来越大，涵盖的东西越来越多，我们是应该不停的往一个程序里面添加内容么？答案肯定是否定的，我们应该只将需要的功能装入app中，于是我们把app分成了企业版和专业版解决了我们的矛盾。突然有一天，你老总气急败坏的告诉你，你的操作失误导致专业版的数据出现混乱造成损失，这个时候你无比的意识到可能你用的专业版和老板的应该又是两个不同的分支。然后又开始头痛app的权限和所涉猎的包大小的问题。

解决方式：功能模块化

我想了很久应该具体给这个方法叫什么名字。最后字面意思，我们应该把我们的功能模块化，什么叫模块化？也就是我这个功能从app内部逻辑独立出来，模块给出interface，我们只需要按照模块的需求传递参数和匿名函数。