在多个界面直接跳转和切换是一个app最基本的功能。本文我们通过小例子来讲述通过NavigationExperimental组件实现导航。
先看看原型设计：
我们要实现的功能包括：
- 通过选项卡切换界面（放贷计算、利率查询和关于我们三个界面）
- 点击列表中的条目，进入查看详情（利率查询，传递年份参数到详情页面）
- 导航栏返回按钮（查看利率详情页面）
- 跨选项卡跳转页面（从“房贷计算”界面点击“查看2015年利率”）
- 通过导航栏的按钮控制界面上的内容（“清零”按钮）
react-native中的导航组件对比
react-native中的导航组件包括NavigatorIOS, Navigator和NavigationExperimental，其中NavigatorIOS只能在iOS平台使用不兼容Android，而Navigator由于各种弊端，官方决定放弃对它的进一步开发和支持。而继任者就是NavigationExperimental组件（以后可能会叫Navigation）。
NavigationExperimental组件当前还处于早期试验阶段，在最近（2016年3月21日）发布的v0.22.2中，才算比较完整和稳定。
NavigationExperimental组件中包含了很多个类和工具函数，本文我们仅仅使用最基础的RootContainer和StateUtil类，并对其封装实现了自定义导航工具NavigationUtility。NavigationUtility导航工具只有一个函数："go"，非常简单易用，稍后会进行介绍。
由于我们的封装超级简化，因此并没有实现界面过渡动画，用户体验欠佳，好处是不用同时渲染多个界面，节约内存和性能。
接下来我们从零开始构建这个小demo。
初始化一个空项目
一个react-native项目，只有一个不可或缺的必备文件就是package.json，其他文件都可以通过命令自动产生。
在package.json中，规定了react-native依赖项的版本，只有v0.22.2及其以后的版本才能与NavigationExperimental组件兼容。另外，由于新版本中引入了hot load特性，需要引入react 0.14.7作为依赖项。
{
"name": "RNavigation",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "^0.14.7",
"react-native": "^0.22.2"
}
}
创建一个空目录（如~/RCTDev/RNavigation），然后把以上代码保存为package.json。在该目录下执行命令："npm install"，安装react-native和其他依赖项。
安装react-native的过程稍慢，可能需要等待几分钟时间，完成之后的目录结构如下：
执行"react-native upgrade"和"react-native android"即可生成ios平台、android平台、watchman、flow、gitignore等项目基础文件。完成之后用Webstorm打开看到的目录结构如下：
还少了index.ios.js，执行"cp index.android.js index.ios.js"复制一份即可。现在，我们可以通过"react-native run-ios"来启动模拟器看效果了。
