?原文：ReactNative頁面跳轉(zhuǎn)Navigator
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ù)棧。
該方法就相當(dāng)于我們使用的startActivity方法了，我們可以在該方法中設(shè)置需要渲染的場景（跳轉(zhuǎn)的頁面），該方法接收兩個(gè)參數(shù)（必要參數(shù)），route和navigator，其中route就是路由的頁面，navigator是一個(gè)Navigator對象，因?yàn)镹avigator對象擁有pop，push，jump等方法，我們需要導(dǎo)航器對象來實(shí)現(xiàn)頁面的跳轉(zhuǎn)。而路由route需要我們提前進(jìn)行配置。
我們來看一下renderScene的使用：
renderScene={(route, navigator) => {letComponent = route.component;return}}
通過上面的方法來實(shí)現(xiàn)頁面的跳轉(zhuǎn)，同時(shí)將導(dǎo)航器作為屬性進(jìn)行傳遞過去。之前說過，route需要進(jìn)行配置，通過initialRoute方法來對我們的路由進(jìn)行初始化，?
如下所示：
? ? initialRoute={{ name: defaultName, component: defaultComponent }}
1
initialRoute是一個(gè)對象，我們通過給對象設(shè)置名稱和對應(yīng)的組件完成route的初始化，即只要傳入需要跳轉(zhuǎn)的組件的名稱和組建對象，即可在renderScene中完成頁面的跳轉(zhuǎn)。
再回頭看renderScene方法，route參數(shù)就是我們通過initialRoute初始化的對象，我們通過route.component即可獲得我們需要渲染（即跳轉(zhuǎn)到）的對象，然后在return的時(shí)候返回這個(gè)對象完成頁面的跳轉(zhuǎn)。為了防止出現(xiàn)問題，我們加上route.component為空的判斷，如果不為空，再進(jìn)行渲染。
renderScene={(route, navigator) => {? ? ? ? ? ?
?let Component = route.component;
if(route.component) {
????return? ? ? ? ? ?
?}? ? ? ?
?}}
該方法用來設(shè)置指定路由對象的配置信息，從而改變場景的動(dòng)畫或者手勢。
configureScene={(route) => {
//跳轉(zhuǎn)的動(dòng)畫
return Navigator.SceneConfigs.VerticalDownSwipeJump;
? ? }
}
例如通過如下的方法我們就可以對我們即將要跳轉(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 defaultclass MyProject extends React.Component {? ?
?????render() {? ? ? ??
????????????var defaultName ='FirstPageComponent';? ? ? ?
? ? ? ? ? ? var defaultComponent = FirstPageComponent;
????????????return({
????????????????????????//跳轉(zhuǎn)的動(dòng)畫
????????????????????returnNavigator.SceneConfigs.FadeAndroid;? ? ? ? ??
????????}}? ? ? ? ??
????????renderScene={(route, navigator) => {? ? ? ? ? ??
????????let Component = route.component;
????????if(route.component){
????????return? ? ? ? ? ??
}? ? ? ? ?
?}} />?
?? ? ? );? ?
?}}
?AppRegistry.registerComponent('MyProject', () => MyProject);
其中FirstPageComponent是我們自定義的一個(gè)組件，沒有添加功能，只放了一個(gè)Text，如下所示：
importReact,{? ? View,? ? Text,} from'react-native';exportdefaultclass FirstPageComponent extends React.Component{? ? constructor(props){super(props);this.state = {};? ? }? ? render(){return(? ? ? ? ? ? ? ? ? ? ? ? ? ? 我是默認(rèn)頁面? ? ? ? ? ? ? ? ? ? ? ? );? ? }}
如果我們現(xiàn)在想要實(shí)現(xiàn)一個(gè)從FirstPageComponent到另一個(gè)頁面之間的跳轉(zhuǎn)，那我們需要怎么做呢？
因?yàn)槲覀冎霸陧撁嫣D(zhuǎn)的時(shí)候?qū)?dǎo)航器對象作為屬性傳遞給了我們的FirstPageComponent，那么我們此時(shí)就可以獲取這個(gè)navigator對象，navigator中有很多方法可以供我們調(diào)用進(jìn)行導(dǎo)航。
首先我們給創(chuàng)建一個(gè)可點(diǎn)擊的區(qū)域包裹Text，這樣點(diǎn)擊Text就可以觸發(fā)事件，如下所示，改造render，
render() {return(點(diǎn)我跳轉(zhuǎn));? ? }
我們先不關(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對象，我們定義route對象的名稱和組件對象，將其放入路由棧，這樣我們通過操控路由棧的方式實(shí)現(xiàn)了另一個(gè)頁面的跳轉(zhuǎn)。
這樣我們改造后的FirstPageComponent如下所示：
import React,{? ? View,? ? Text,? ? TouchableOpacity} from 'react-native';
import SecondPageComonent from "./SecondPageComponent";
exportdefaultclass ?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(點(diǎn)我跳轉(zhuǎn)?);?
?? }}
其中SecondPageComonent是我們定義的另一個(gè)組件，實(shí)現(xiàn)代碼如下所示：
import React,{ ?View,? ? Text,? ? TouchableOpacity,} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
exportdefaultclass ?SecondPageComponent extends React.Component{
?? ?????constructor(props){
????????????????super(props);
????????????????this.state = {};
? ? }
? ? _pressButton(){
????????const { navigator } =this.props;
????????if(navigator){
? ? ? ? ? ? navigator.pop();
? ? ? ? }
? ? }
? ? render(){
????return(? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 點(diǎn)我跳轉(zhuǎn)回去? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? );? ? }}
在SecondPageComponent中，我們通過控制路由棧將頁面出棧的方式pop()完成跳轉(zhuǎn)回到第一個(gè)頁面的功能。
我們發(fā)現(xiàn)，頁面的跳轉(zhuǎn)都是通過navigator對象的一系列方法通過對路由棧的操控來實(shí)現(xiàn)頁面之間跳轉(zhuǎn)加載的功能的，我們看一下導(dǎo)航器都有那些方法：
getCurrentRoutes() - 獲取當(dāng)前棧里的路由，也就是push進(jìn)來，沒有pop掉的那些。?
jumpBack() - 跳回之前的路由，當(dāng)然前提是保留現(xiàn)在的，還可以再跳回來，會(huì)給你保留原樣。?
jumpForward() - 上一個(gè)方法不是調(diào)到之前的路由了么，用這個(gè)跳回來就好了。?
jumpTo(route) - 跳轉(zhuǎn)到已有的場景并且不卸載。?
push(route) - 跳轉(zhuǎn)到新的場景，并且將場景入棧，你可以稍后跳轉(zhuǎn)過去?
pop() - 跳轉(zhuǎn)回去并且卸載掉當(dāng)前場景?
replace(route) - 用一個(gè)新的路由替換掉當(dāng)前場景?
replaceAtIndex(route, index) - 替換掉指定序列的路由場景?
replacePrevious(route) - 替換掉之前的場景?
immediatelyResetRouteStack(routeStack) - 用新的路由數(shù)組來重置路由棧?
popToRoute(route) - pop到路由指定的場景，其他的場景將會(huì)卸載。?
popToTop() - pop到棧中的第一個(gè)場景，卸載掉所有的其他場景。
當(dāng)我們從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面的時(shí)候，總免不了需要進(jìn)行參數(shù)的傳遞，那么我們怎么將參數(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到頁面上。我們再來看一下導(dǎo)航器加載的方法：
renderScene={(route, navigator) => {
? ? ? ? ? ? let Component = route.component;
????????????if(route.component){
????????????????????return
? ? ? ? ? ? }
? ? ? ? }}
我們所有的組件都是通過導(dǎo)航器加載到頁面上的，第一個(gè)頁面是，第二個(gè)頁面并不是由第一個(gè)頁面啟動(dòng)的，而是有導(dǎo)航器控制路由棧來顯示在頁面上的，我們在renderScene是獲取到第一個(gè)頁面，并且將其渲染到屏幕上，我們在第一個(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
? ? ? ? ? ? }
? ? ? ? }}
在這里就相當(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';
exportdefaultclass MyProject extends React.Component {
? ? render() {
? ? ? ? var defaultName ='FirstPageComponent';
? ? ? ? var defaultComponent = FirstPageComponent;
????????return({
????????? ? ? ? //跳轉(zhuǎn)的動(dòng)畫
????????????????return ?Navigator.SceneConfigs.FadeAndroid;
? ? ? ? ? }}
? ? ? ? ? renderScene={(route, navigator) => {?
?? ? ? ? ? let Component = route.component;
????????????if(route.component){
????????????????????return
? ? ? ? ? ? }
? ? ? ? ? }} />? ? ? ? );
? ? }}
?AppRegistry.registerComponent('MyProject', () => MyProject);
FirstPageComponent.js
import React, {? ? View,? ? Text,? ? TouchableOpacity} from 'react-native';
import SecondPageComonent from "./SecondPageComponent";
export defaultclass 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({this.state.resultMessage});?
?}}
SecondPageComponent.js
import React,{? ? View,? ? Text,? ? TouchableOpacity,} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
export defaultclass 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(
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {this.state.message}??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? );
? ? }}
最終效果如下所示：?
