ReactNative頁面跳轉Navigator實現的示例代碼

2019-11-19 15:55:09

字體：大中小

來源：轉載

供稿：網友

本文介紹了ReactNative頁面跳轉Navigator，分享給大家。具體如下：

Navigator即導航器，通過導航器我們可以實現應用在不同的頁面之間進行跳轉。

導航器會建立一個路由棧，用來彈出，推入或者替換路由狀態。該路由棧相當于Android原生中使用的任務棧。

renderScene

該方法就相當于我們使用的startActivity方法了，我們可以在該方法中設置需要渲染的場景（跳轉的頁面），該方法接收兩個參數（必要參數），route和navigator，其中route就是路由的頁面，navigator是一個Navigator對象，因為Navigator對象擁有pop，push，jump等方法，我們需要導航器對象來實現頁面的跳轉。而路由route需要我們提前進行配置。

我們來看一下renderScene的使用：

  renderScene={(route, navigator) => {   let Component = route.component;   return <Component {...route.params} navigator={navigator} />  }}

通過上面的方法來實現頁面的跳轉，同時將導航器作為屬性進行傳遞過去。之前說過，route需要進行配置，通過initialRoute方法來對我們的路由進行初始化，如下所示：

 initialRoute={{ name: defaultName, component: defaultComponent }}

initialRoute是一個對象，我們通過給對象設置名稱和對應的組件完成route的初始化，即只要傳入需要跳轉的組件的名稱和組建對象，即可在renderScene中完成頁面的跳轉。

再回頭看renderScene方法，route參數就是我們通過initialRoute初始化的對象，我們通過route.component即可獲得我們需要渲染（即跳轉到）的對象，然后在return的時候返回這個對象完成頁面的跳轉。為了防止出現問題，我們加上route.component為空的判斷，如果不為空，再進行渲染。

    renderScene={(route, navigator) => {      let Component = route.component;      if(route.component){        return <Component {...route.params} navigator={navigator} />      }    }}

configureScene

該方法用來設置指定路由對象的配置信息，從而改變場景的動畫或者手勢。

  configureScene={(route) => {   //跳轉的動畫   return Navigator.SceneConfigs.VerticalDownSwipeJump;  }}

例如通過如下的方法我們就可以對我們即將要跳轉的界面設置跳轉動畫。

Navigator.SceneConfigs為我們提供了大量的跳轉動畫，具體可以參考如下文件。

MyProject/node_modules/React-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.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     //指定了默認的頁面，也就是啟動app之后會看到的第一屏，需要兩個參數，name跟component     initialRoute={{ name: defaultName, component: defaultComponent }}     configureScene={(route) => {      //跳轉的動畫      return Navigator.SceneConfigs.FadeAndroid;     }}     renderScene={(route, navigator) => {      let Component = route.component;      if(route.component){        return <Component navigator={navigator} />      }     }} />    );  }} AppRegistry.registerComponent('MyProject', () => MyProject);

其中FirstPageComponent是我們自定義的一個組件，沒有添加功能，只放了一個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>我是默認頁面</Text>      </View>      );  }}

如果我們現在想要實現一個從FirstPageComponent到另一個頁面之間的跳轉，那我們需要怎么做呢？

因為我們之前在頁面跳轉的時候將導航器對象作為屬性傳遞給了我們的FirstPageComponent，那么我們此時就可以獲取這個navigator對象，navigator中有很多方法可以供我們調用進行導航。

首先我們給創建一個可點擊的區域包裹Text，這樣點擊Text就可以觸發事件，如下所示，改造render，

  render() {    return (      <View>        <TouchableOpacity onPress={this._pressButton.bind(this)}>          <Text>點我跳轉</Text>        </TouchableOpacity>      </View>    );  }

我們先不關注TouchableOpacity是什么，只知道他是一片可點擊的區域，并且擁有點擊事件即可。

然后我們實現_pressButton方法，如下所示：

  _pressButtoon(){    const { navigator} = this.props;    if (navigator) {      navigator.push({        name:'SecondPageComonent',        component:SecondPageComonent,      })    }  }

我們從傳遞過來的屬性中獲取navigator，然后調用navigator的push方法，push方法接收的參數為route對象，我們定義route對象的名稱和組件對象，將其放入路由棧，這樣我們通過操控路由棧的方式實現了另一個頁面的跳轉。

這樣我們改造后的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>點我跳轉</Text>        </TouchableOpacity>      </View>      );  }}

其中SecondPageComonent是我們定義的另一個組件，實現代碼如下所示：

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>點我跳轉回去</Text>        </TouchableOpacity>      </View>      );  }}

在SecondPageComponent中，我們通過控制路由棧將頁面出棧的方式pop()完成跳轉回到第一個頁面的功能。

我們發現，頁面的跳轉都是通過navigator對象的一系列方法通過對路由棧的操控來實現頁面之間跳轉加載的功能的，我們看一下導航器都有那些方法：

getCurrentRoutes() - 獲取當前棧里的路由，也就是push進來，沒有pop掉的那些。
jumpBack() - 跳回之前的路由，當然前提是保留現在的，還可以再跳回來，會給你保留原樣。
jumpForward() - 上一個方法不是調到之前的路由了么，用這個跳回來就好了。
jumpTo(route) - 跳轉到已有的場景并且不卸載。
push(route) - 跳轉到新的場景，并且將場景入棧，你可以稍后跳轉過去
pop() - 跳轉回去并且卸載掉當前場景
replace(route) - 用一個新的路由替換掉當前場景
replaceAtIndex(route, index) - 替換掉指定序列的路由場景
replacePrevious(route) - 替換掉之前的場景
immediatelyResetRouteStack(routeStack) - 用新的路由數組來重置路由棧
popToRoute(route) - pop到路由指定的場景，其他的場景將會卸載。
popToTop() - pop到棧中的第一個場景，卸載掉所有的其他場景。

參數的傳遞

當我們從一個頁面跳轉到另一個頁面的時候，總免不了需要進行參數的傳遞，那么我們怎么將參數傳遞到另一個頁面呢？

我們可以通過push()方法將參數傳遞過去。

首先我們需要明確FirstPageComponent，MyProject和SecondPageComponent三者之間的關系，程序啟動時首先會啟動MyProject，然后看到在MyProject中有一個導航器，該導航器初始化路由的時候獲取了我們的FirstPageComponent，將其解析為一個組件在renderScene的時候將其加載到頁面上。我們再來看一下導航器加載的方法：

    renderScene={(route, navigator) => {      let Component = route.component;      if(route.component){        return <Component navigator={navigator} />      }    }}

我們所有的組件都是通過導航器加載到頁面上的，第一個頁面是，第二個頁面并不是由第一個頁面啟動的，而是有導航器控制路由棧來顯示在頁面上的，我們在renderScene是獲取到第一個頁面，并且將其渲染到屏幕上，我們在第一個頁面中設置的push信息也是將信息傳遞給導航器的，那么我們就可以在這個時候將需要傳遞給Navigator，然后讓其在傳遞給第二個頁面，這樣就可以完成參數的傳遞。

首先我們更改FirstPageComponent的按鈕點擊事件，如下所示：

    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} />      }    }}

在這里就相當于將參數傳遞給了Navigator，展開成然后我們就可以在第二個頁面中通過props.message獲取到信息，如下所示,添加頁面掛載時的方法，設置狀態的方法將獲取到的參數保存在state中：

  componentDidMount(){    this.setState({      message:this.props.message,    });  }

如果當我們返回的時候需要攜帶參數，我們可以通過給navigator設置一個回調方法，用于給第一個頁面設置信息，這樣就可以完成返回時數據的傳遞了。

完整代碼如下所示：

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     //指定了默認的頁面，也就是啟動app之后會看到的第一屏，需要兩個參數，name跟component     initialRoute={{ name: defaultName, component: defaultComponent }}     configureScene={(route) => {      //跳轉的動畫      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>      );  }}

最終效果如下所示：