第一步:添加Navigator組件。
添加 Navigator 的組件<Navigator/>. 設置方法: 初始化路由(initialRoute), 配置場景動畫(configureScene), 渲染場景(renderScene). 初始化路由(initialRoute), 使用FirstPage頁面作為首頁.
clipboard.png
配置場景動畫(configureScene): 根據路由的type屬性, 判斷使用的動畫樣式, 底部彈出或右側彈出.
clipboard.png
渲染場景(renderScene): 使用動態加載組件的方式. 設置加載頁面的navigator參數, 其余使用route.passProps屬性傳遞其他參數.
clipboard.png
注: 上面的route.passProps為傳過去的參數。
第二步: 創建出兩個模擬跳轉的頁面
頁面一:
clipboard.png
_navigate()方法: 導航跳轉, 調用navigator.push()方法. 傳遞參數passProps的name屬性, type動畫類型, component跳轉組件.
頁面 二:
clipboard.png

左鍵LeftButton: index屬性表示當前頁面的索引, 通過判斷index屬性, 獲知棧內是否有其他頁面, 判斷后退按鈕是否顯示. 點擊調用navigator.pop()出棧.
clipboard.png
右鍵RightButton: 點擊調用路由(route)的onPress()方法, 提示信息. 根據路由的rightText屬性添加顯示文字.
clipboard.png
第一頁與第二頁與上文類似, 當第一頁跳轉時, 傳遞的路由信息有些變化, 控制第二頁與導航欄的顯示信息.
clipboard.png