您好,登錄后才能下訂單哦!
本文介紹了ReactNative頁面跳轉(zhuǎn)Navigator,分享給大家。具體如下:
Navigator即導(dǎo)航器,通過導(dǎo)航器我們可以實(shí)現(xiàn)應(yīng)用在不同的頁面之間進(jìn)行跳轉(zhuǎn)。
導(dǎo)航器會(huì)建立一個(gè)路由棧,用來彈出,推入或者替換路由狀態(tài)。該路由棧相當(dāng)于Android原生中使用的任務(wù)棧。
renderScene
該方法就相當(dāng)于我們使用的startActivity方法了,我們可以在該方法中設(shè)置需要渲染的場景(跳轉(zhuǎn)的頁面),該方法接收兩個(gè)參數(shù)(必要參數(shù)),route和navigator,其中route就是路由的頁面,navigator是一個(gè)Navigator對(duì)象,因?yàn)镹avigator對(duì)象擁有pop,push,jump等方法,我們需要導(dǎo)航器對(duì)象來實(shí)現(xiàn)頁面的跳轉(zhuǎn)。而路由route需要我們提前進(jìn)行配置。
我們來看一下renderScene的使用:
renderScene={(route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator} /> }}
通過上面的方法來實(shí)現(xiàn)頁面的跳轉(zhuǎn),同時(shí)將導(dǎo)航器作為屬性進(jìn)行傳遞過去。之前說過,route需要進(jìn)行配置,通過initialRoute方法來對(duì)我們的路由進(jìn)行初始化,如下所示:
initialRoute={{ name: defaultName, component: defaultComponent }}
initialRoute是一個(gè)對(duì)象,我們通過給對(duì)象設(shè)置名稱和對(duì)應(yīng)的組件完成route的初始化,即只要傳入需要跳轉(zhuǎn)的組件的名稱和組建對(duì)象,即可在renderScene中完成頁面的跳轉(zhuǎn)。
再回頭看renderScene方法,route參數(shù)就是我們通過initialRoute初始化的對(duì)象,我們通過route.component即可獲得我們需要渲染(即跳轉(zhuǎn)到)的對(duì)象,然后在return的時(shí)候返回這個(gè)對(duì)象完成頁面的跳轉(zhuǎn)。為了防止出現(xiàn)問題,我們加上route.component為空的判斷,如果不為空,再進(jìn)行渲染。
renderScene={(route, navigator) => { let Component = route.component; if(route.component){ return <Component {...route.params} navigator={navigator} /> } }}
configureScene
該方法用來設(shè)置指定路由對(duì)象的配置信息,從而改變場景的動(dòng)畫或者手勢(shì)。
configureScene={(route) => { //跳轉(zhuǎn)的動(dòng)畫 return Navigator.SceneConfigs.VerticalDownSwipeJump; }}
例如通過如下的方法我們就可以對(duì)我們即將要跳轉(zhuǎn)的界面設(shè)置跳轉(zhuǎn)動(dòng)畫。
Navigator.SceneConfigs為我們提供了大量的跳轉(zhuǎn)動(dòng)畫,具體可以參考如下文件。
MyProject\node_modules\React-native\Libraries\CustomComponents\Navigator\NavigatorSceneConfigs.js
這樣我們就完成了在程序默認(rèn)頁面到我們自定義頁面之間的跳轉(zhuǎn)過程。
完整代碼如下所示:
'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, Image, TextInput, View, Navigator } from 'react-native'; import FirstPageComponent from './app/src/FirstPageComponent'; export default class MyProject extends React.Component { render() { var defaultName = 'FirstPageComponent'; var defaultComponent = FirstPageComponent; return ( <Navigator //指定了默認(rèn)的頁面,也就是啟動(dòng)app之后會(huì)看到的第一屏,需要兩個(gè)參數(shù),name跟component initialRoute={{ name: defaultName, component: defaultComponent }} configureScene={(route) => { //跳轉(zhuǎn)的動(dòng)畫 return Navigator.SceneConfigs.FadeAndroid; }} renderScene={(route, navigator) => { let Component = route.component; if(route.component){ return <Component navigator={navigator} /> } }} /> ); } } AppRegistry.registerComponent('MyProject', () => MyProject);
其中FirstPageComponent是我們自定義的一個(gè)組件,沒有添加功能,只放了一個(gè)Text,如下所示:
import React,{ View, Text, } from 'react-native'; export default class FirstPageComponent extends React.Component{ constructor(props){ super(props); this.state = {}; } render(){ return ( <View> <Text>我是默認(rèn)頁面</Text> </View> ); } }
如果我們現(xiàn)在想要實(shí)現(xiàn)一個(gè)從FirstPageComponent到另一個(gè)頁面之間的跳轉(zhuǎn),那我們需要怎么做呢?
因?yàn)槲覀冎霸陧撁嫣D(zhuǎn)的時(shí)候?qū)?dǎo)航器對(duì)象作為屬性傳遞給了我們的FirstPageComponent,那么我們此時(shí)就可以獲取這個(gè)navigator對(duì)象,navigator中有很多方法可以供我們調(diào)用進(jìn)行導(dǎo)航。
首先我們給創(chuàng)建一個(gè)可點(diǎn)擊的區(qū)域包裹Text,這樣點(diǎn)擊Text就可以觸發(fā)事件,如下所示,改造render,
render() { return ( <View> <TouchableOpacity onPress={this._pressButton.bind(this)}> <Text>點(diǎn)我跳轉(zhuǎn)</Text> </TouchableOpacity> </View> ); }
我們先不關(guān)注TouchableOpacity是什么,只知道他是一片可點(diǎn)擊的區(qū)域,并且擁有點(diǎn)擊事件即可。
然后我們實(shí)現(xiàn)_pressButton方法,如下所示:
_pressButtoon(){ const { navigator} = this.props; if (navigator) { navigator.push({ name:'SecondPageComonent', component:SecondPageComonent, }) } }
我們從傳遞過來的屬性中獲取navigator,然后調(diào)用navigator的push方法,push方法接收的參數(shù)為route對(duì)象,我們定義route對(duì)象的名稱和組件對(duì)象,將其放入路由棧,這樣我們通過操控路由棧的方式實(shí)現(xiàn)了另一個(gè)頁面的跳轉(zhuǎn)。
這樣我們改造后的FirstPageComponent如下所示:
import React,{ View, Text, TouchableOpacity } from 'react-native'; import SecondPageComonent from "./SecondPageComponent"; export default class FirstPageComponent extends React.Component{ constructor(props){ super(props); this.state = {}; } _pressButtoon(){ const { navigator} = this.props; if (navigator) { navigator.push({ name:'SecondPageComonent', component:SecondPageComonent, }) } } render(){ return ( <View> <TouchableOpacity onPress={this._pressButtoon.bind(this)}> <Text>點(diǎn)我跳轉(zhuǎn)</Text> </TouchableOpacity> </View> ); } }
其中SecondPageComonent是我們定義的另一個(gè)組件,實(shí)現(xiàn)代碼如下所示:
import React,{ View, Text, TouchableOpacity, } from 'react-native'; import FirstPageComponent from './FirstPageComponent'; export default class SecondPageComponent extends React.Component{ constructor(props){ super(props); this.state = {}; } _pressButton(){ const { navigator } = this.props; if(navigator){ navigator.pop(); } } render(){ return ( <View> <TouchableOpacity onPress={this._pressButton.bind(this)}> <Text>點(diǎn)我跳轉(zhuǎn)回去</Text> </TouchableOpacity> </View> ); } }
在SecondPageComponent中,我們通過控制路由棧將頁面出棧的方式pop()完成跳轉(zhuǎn)回到第一個(gè)頁面的功能。
我們發(fā)現(xiàn),頁面的跳轉(zhuǎn)都是通過navigator對(duì)象的一系列方法通過對(duì)路由棧的操控來實(shí)現(xiàn)頁面之間跳轉(zhuǎn)加載的功能的,我們看一下導(dǎo)航器都有那些方法:
參數(shù)的傳遞
當(dāng)我們從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面的時(shí)候,總免不了需要進(jìn)行參數(shù)的傳遞,那么我們?cè)趺磳?shù)傳遞到另一個(gè)頁面呢?
我們可以通過push()方法將參數(shù)傳遞過去。
首先我們需要明確FirstPageComponent,MyProject和SecondPageComponent三者之間的關(guān)系,程序啟動(dòng)時(shí)首先會(huì)啟動(dòng)MyProject,然后看到在MyProject中有一個(gè)導(dǎo)航器,該導(dǎo)航器初始化路由的時(shí)候獲取了我們的FirstPageComponent,將其解析為一個(gè)組件在renderScene的時(shí)候?qū)⑵浼虞d到頁面上。我們?cè)賮砜匆幌聦?dǎo)航器加載的方法:
renderScene={(route, navigator) => { let Component = route.component; if(route.component){ return <Component navigator={navigator} /> } }}
我們所有的組件都是通過導(dǎo)航器加載到頁面上的,第一個(gè)頁面是,第二個(gè)頁面并不是由第一個(gè)頁面啟動(dòng)的,而是有導(dǎo)航器控制路由棧來顯示在頁面上的,我們?cè)趓enderScene是獲取到第一個(gè)頁面,并且將其渲染到屏幕上,我們?cè)诘谝粋€(gè)頁面中設(shè)置的push信息也是將信息傳遞給導(dǎo)航器的,那么我們就可以在這個(gè)時(shí)候?qū)⑿枰獋鬟f給Navigator,然后讓其在傳遞給第二個(gè)頁面,這樣就可以完成參數(shù)的傳遞。
首先我們更改FirstPageComponent的按鈕點(diǎn)擊事件,如下所示:
navigator.push({ name:'SecondPageComonent', component:SecondPageComonent, params:{ message:"I am from FirstPageComponent", } })
然后在Navigator中獲取,如下所示:
renderScene={(route, navigator) => { let Component = route.component; if(route.component){ return <Component {...route.params} navigator={navigator} /> } }}
在這里就相當(dāng)于將參數(shù)傳遞給了Navigator,展開成然后我們就可以在第二個(gè)頁面中通過props.message獲取到信息,如下所示,添加頁面掛載時(shí)的方法,設(shè)置狀態(tài)的方法將獲取到的參數(shù)保存在state中:
componentDidMount(){ this.setState({ message:this.props.message, }); }
如果當(dāng)我們返回的時(shí)候需要攜帶參數(shù),我們可以通過給navigator設(shè)置一個(gè)回調(diào)方法,用于給第一個(gè)頁面設(shè)置信息,這樣就可以完成返回時(shí)數(shù)據(jù)的傳遞了。
完整代碼如下所示:
index.android.js
'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, Image, TextInput, View, Navigator } from 'react-native'; import FirstPageComponent from './app/src/FirstPageComponent'; export default class MyProject extends React.Component { render() { var defaultName = 'FirstPageComponent'; var defaultComponent = FirstPageComponent; return ( <Navigator //指定了默認(rèn)的頁面,也就是啟動(dòng)app之后會(huì)看到的第一屏,需要兩個(gè)參數(shù),name跟component initialRoute={{ name: defaultName, component: defaultComponent }} configureScene={(route) => { //跳轉(zhuǎn)的動(dòng)畫 return Navigator.SceneConfigs.FadeAndroid; }} renderScene={(route, navigator) => { let Component = route.component; if(route.component){ return <Component {...route.params} navigator={navigator} /> } }} /> ); } } AppRegistry.registerComponent('MyProject', () => MyProject);
FirstPageComponent.js
import React,{ View, Text, TouchableOpacity } from 'react-native'; import SecondPageComonent from "./SecondPageComponent"; export default class FirstPageComponent extends React.Component{ constructor(props){ super(props); this.state = { resultMessage:"hello", }; } _pressButtoon(){ var _this = this; const { navigator} = this.props; if (navigator) { navigator.push({ name:'SecondPageComonent', component:SecondPageComonent, params:{ message:"I am from FirstPageComponent", getResult:function(myMessage){ _this.setState({ resultMessage:myMessage, }) } } }) } } render(){ return ( <View> <TouchableOpacity onPress={this._pressButtoon.bind(this)}> <Text>{this.state.resultMessage}</Text> </TouchableOpacity> </View> ); } }
SecondPageComponent.js
import React,{ View, Text, TouchableOpacity, } from 'react-native'; import FirstPageComponent from './FirstPageComponent'; export default class SecondPageComponent extends React.Component{ constructor(props){ super(props); this.state = { message:"", }; } componentDidMount(){ this.setState({ message:this.props.message, }); } _pressButton(){ const { navigator } = this.props; if(this.props.getResult){ this.props.getResult("This is from SecondPageComponent"); } if(navigator){ navigator.pop(); } } render(){ return ( <View> <TouchableOpacity onPress={this._pressButton.bind(this)}> <Text>{this.state.message}</Text> </TouchableOpacity> </View> ); } }
最終效果如下所示:
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。