在多個界面直接跳轉和切換是一個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"來啟動模擬器看效果了。
