React Native系列——Navigator組件的使用介紹

2019-11-09 17:58:39

字體：大中小

來源：轉載

供稿：網友

一、介紹

導航組件Navigator可以讓我們客戶端在不同的頁面見進行切換。為了達到這樣的功能，Navigator提供了路由對象功能進行區分識別每一個頁面。同時我們可以通過renderScene方法，Navaigator根據指定的路由進行渲染指定的界面。

支持：ios，android

大家先把完整代碼看一遍，有個大概了解再開始看文章

二、屬性

configureScene function 方法，該為可選的方法進行配置頁面切換動畫和手勢。該會通過路由和路由棧兩個參數調用，進行返回一個頁面參數配置對象：(route, routeStack) => Navigator.SceneConfigs.FloatFromRight

initialRoute object 參數對象進行設置導航初始化的路由頁面。路由是標識導航器渲染標識每一個頁面的對象。initialRoute必須為initialRouteStack中的路由。同時initialRoute默認為initialRouteStack中路由棧的最后一項

initialRouteStack [object] 參數對象數組該是一個初始化的路由數組進行初始化。如果initalRoute屬性沒有設置的話，那么就必須設置initialRouteStack屬性，使用該最后一項作為初始路由。如果initalRouteStack屬性沒有設置的話，該會生成只包含initalRoute值的數組

navigationBar node 該為可選的參數，在頁面切換中用來提供一個導航欄

navigator object 該為可選參數，可以從父類導航器中獲取導航器對象

onDidFoucs function 該方法已經廢棄，我們可以使用navigationContext.addListener('didfocus',callback)方法進行替代。該會在每次頁面切換完成或者初始化之后進行調用該方法。該參數為新頁面的路由

onWillFocus function 該方法已經廢棄，我們可以使用navigationContext.addListener('willfocus',callback)方法進行替代。該會頁面每次進行切換之前調用

renderScene function 該為必須調用的方法，該用來渲染每一個路由指定的頁面。參數為路由以及導航器對象兩個參數，具體是方法如下:(route, navigator) =>

sceneStyle 樣式風格，該繼承了View視圖的所有樣式風格。可以參照:點擊查看View樣式。該設置用于每個頁面容器的風格

紅色的三個是主要方法

三、頁面跳轉效果

為了改變頁面切換的動畫或者頁面的手勢，該組件提供的configureScene屬性來進行獲取指定路由頁面的配置對象信息。對于頁面切換動畫或者更多的屏幕配置選項信息詳情可以查看Navigator.SceneConfigs

關于動畫手勢有如下一些屬性:

PushFromRight

FloatFromRight

FloatFromLeft

FloatFromBottom

FloatFromBottomAndroid

FadeAndroid

HorizontalSwipeJump

HorizontalSwipeJumpFromRight

VerticalUpSwipeJump

VerticalDownSwipeJump

更多屬性大家可以進行修改NavigatorSceneConfigs.js該文件即可

四、頁面跳轉方法

getCurrentRoutes() 該進行返回存在的路由列表信息

jumpBack() 該進行回退操作但是該不會卸載(刪除)當前的頁面

jumpForward() 進行跳轉到相當于當前頁面的下一個頁面

jumpTo(route) 根據傳入的一個路由信息，跳轉到一個指定的頁面(該頁面不會卸載刪除)

push(route) 導航切換到一個新的頁面中，新的頁面進行壓入棧。通過jumpForward()方法可以回退過去

pop() 當前頁面彈出來，跳轉到棧中下一個頁面，并且卸載刪除掉當前的頁面

replace(route) 只用傳入的路由的指定頁面進行替換掉當前的頁面

replaceAtIndex(route,index) 傳入路由以及位置索引，使用該路由指定的頁面跳轉到指定位置的頁面

replacePRevious(route) 傳入路由，通過指定路由的頁面替換掉前一個頁面

resetTo(route) 進行導航到新的界面，并且重置整個路由棧

immediatelyResetRouteStack(routeStack) 該通過一個路由頁面數組來進行重置路由棧

popToRoute(route) 進行彈出相關頁面，跳轉到指定路由的頁面，彈出來的頁面會被卸載刪除

popToTop() 進行彈出頁面，導航到棧中的第一個頁面，彈出來的所有頁面會被卸載刪除

說明

1、一個有意思的事情是，如果你的動畫是從右邊往左進入的，你從左往右滑動，可以回到前一個路由頁面

2、這些方法要合理使用才能夠達到最佳效果，比如篩選頁面就應該彈出一個新頁面而不把之前的頁面卸載。

3、頁面跳轉方法中的route參數是什么

這些都是navigator可以用的public method,就是跳轉用的，里面有些帶參數的XXX(route)，新手第一次看這個文檔會疑惑，這個route參數是啥呢，這個route就是Navigator組件屬性的initialRoute，是一個對象。

解惑

我最開始不理解他是怎么設置的，所以每次都會是渲染相同的頁面，切換頁面的效果也一樣，如果所示

產生錯誤的代碼，原因在注釋中

classRockqextendsComponent{render(){return(<navigatorinitialRoute={{name:'Home頁面',index:0}}configureScene={(route)=>{//渲染的動畫是固定的了returnNavigator.SceneConfigs.VerticalDownSwipeJump;}}renderScene={(route,navigator)=>{constnumber=12;//渲染的組件是固定的了return}}/>);}}疑問

1、一個應用中只需要一個Navigator嗎？

導航組件中有這么一個屬性（navigator object 該為可選參數，可以從父類導航器中獲取導航器對象），所以我猜測Navigator可以嵌套，但最好用一個navigator，其實平常我們在根組件上用一個Navigator就可以了。

2、導航組件里面的棧的概念？

正是因為有了棧，才可以實現返回前進的操作。

3、這些跳轉方法的區別？

時間不夠，待完善。

4、navigationBar屬性

這個組件我用了一下，就是在你手機屏幕的最下面展示你給的組件，弄不明白干什么用的，好像沒什么大用，回頭弄清楚了了再給完善進來。

5、組件上onDidFoucs onWillFocus 兩個廢棄的方法怎么使用

在組件中使用，但是你在用的時候就會發現從page1跳轉到home頁面的時候，page1中和home中的事件都觸發了，可能因為在組件離開的時候忘了取消了，這是react中監聽事件的問題。

componentWillMount(){this.props.navigator.navigationContext.addListener('willfocus',()=>Alert.alert('AlertTitle',`將要進入路由${this.props.name}`));this.props.navigator.navigationContext.addListener('didfocus',()=>Alert.alert('AlertTitle',`進入路由${this.props.name}`));}

換行

componentWillUnmount(){this.props.navigator.navigationContext.removeListener('willfocus',()=>Alert.alert('AlertTitle',`將要進入路由${this.props.name}`));this.props.navigator.navigationContext.removeListener('didfocus',()=>Alert.alert('AlertTitle',`進入路由${this.props.name}`));}

重要思考：

后來我又想了一下，發現不對，都是同一個navigator對象，不用添加那么多次所以這個方法可以加載組件的生命周期中，也可以加載Navigator組件中的renderScene方法中。

參考文章

http://bbs.reactnative.cn/topic/20/%E6%96%B0%E6%89%8B%E7%90%86%E8%A7%A3navigator%E7%9A%84%E6%95%99%E7%A8%8B/2

http://reactnative.cn/docs/0.24/navigator.html#content

http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bnavigator%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3%E4%BB%A5%E5%8F%8A%E5%AE%9E%E4%BE%8B23/

免責說明

1、本博客中的文章摘自網上的眾多博客，僅作為自己知識的補充和整理，并分享給其他需要的coder，不會用于商用。

2、因為很多博客的地址看完沒有及時做保存，所以很多不會在這里標明出處，非常感謝各位大牛的分享，也希望大家理解。

完整代碼

項目結構

1、App.js代碼

importReact,{AppRegistry,Component,StyleSheet,Text,View,Navigator}from'react-native';importHomefrom'./Home';exportdefaultclassAppextendsComponent{render(){return(<navigatorinitialRoute={{params:{name:'Home頁面'},component:Home}}configureScene={(route)=>{if(route.sceneConfig){returnroute.sceneConfig;}returnNavigator.SceneConfigs.FloatFromBottom;}}renderScene={(route,navigator)=>{letDefaultComponent=route.component;letnumber=12;return}}/>);}}conststyles=StyleSheet.create({});

關鍵就在于configureScene中的動畫不要寫死，renderScene中渲染的組件不要寫死

2、Home.js

importReact,{AppRegistry,Component,StyleSheet,Text,TouchableHighlight,View,Navigator}from'react-native';importPage1from'./Page1';importPage2from'./Page2';importPage3from'./Page3';exportdefaultclassHomeextendsComponent{render(){return({this.props.name}<touchablehighlightonPress={()=>this.props.navigator.push({sceneConfig:Navigator.SceneConfigs.FloatFromRight,component:Page1,params:{name:'Page1頁面'}})}>跳轉到Page1<touchablehighlightonPress={()=>this.props.navigator.push({sceneConfig:Navigator.SceneConfigs.FloatFromBottom,component:Page2,params:{name:'Page2頁面'}})}>跳轉到Page2<touchablehighlightonPress={()=>this.props.navigator.push({sceneConfig:Navigator.SceneConfigs.HorizontalSwipeJumpFromRight,component:Page3,params:{name:'Page3頁面'}})}>跳轉到Page3);}}conststyles=StyleSheet.create({container:{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#F5FCFF',},title:{fontSize:60},text:{textAlign:'center',color:'#333333',marginBottom:5,},page1:{fontSize:40,backgroundColor:'red'},page2:{fontSize:40,backgroundColor:'blue'},page3:{fontSize:40,backgroundColor:'yellow'},});

3、Page1.js

importReact,{AppRegistry,Component,StyleSheet,Text,TouchableHighlight,View,Navigator}from'react-native';importPage2from'./Page2';exportdefaultclassPage1extendsComponent{render(){return({this.props.name}<touchablehighlightonPress={()=>this.props.navigator.push({sceneConfig:Navigator.SceneConfigs.FloatFromRight,component:Page2,params:{name:'Page2頁面'}})}>跳轉到Page2<touchablehighlightonPress={()=>this.props.navigator.pop()}>返回);}}conststyles=StyleSheet.create({container:{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#F5FCFF',},title:{fontSize:60},text:{textAlign:'center',color:'#333333',marginBottom:5,backgroundColor:'#00ced1',fontSize:40,}});

上一篇：Path之PathMeasure的介紹(一)

下一篇：動態加載