Navigator導航

第一步:添加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
![clipboard.png](http://upload-images.jianshu.io/upload_images/4732002-16b85bf3283da0fb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

左鍵LeftButton: index屬性表示當前頁面的索引, 通過判斷index屬性, 獲知棧內是否有其他頁面, 判斷后退按鈕是否顯示. 點擊調用navigator.pop()出棧.

clipboard.png

右鍵RightButton: 點擊調用路由(route)的onPress()方法, 提示信息. 根據路由的rightText屬性添加顯示文字.

clipboard.png

第一頁與第二頁與上文類似, 當第一頁跳轉時, 傳遞的路由信息有些變化, 控制第二頁與導航欄的顯示信息.

clipboard.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容