ReactNative頁面跳轉(zhuǎn)Navigator實現(xiàn)的示例代碼

更新時間：2017年08月02日 11:38:09 作者：蒼蠅小黑

本篇文章主要介紹了ReactNative頁面跳轉(zhuǎn)Navigator實現(xiàn)的示例代碼，具有一定的參考價值，有興趣的可以了解一下

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

Navigator即導(dǎo)航器，通過導(dǎo)航器我們可以實現(xiàn)應(yīng)用在不同的頁面之間進行跳轉(zhuǎn)。

導(dǎo)航器會建立一個路由棧，用來彈出，推入或者替換路由狀態(tài)。該路由棧相當(dāng)于Android原生中使用的任務(wù)棧。

renderScene

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

我們來看一下renderScene的使用：

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

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

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

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

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

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

configureScene

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

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

例如通過如下的方法我們就可以對我們即將要跳轉(zhuǎn)的界面設(shè)置跳轉(zhuǎn)動畫。

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

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

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

因為我們之前在頁面跳轉(zhuǎn)的時候?qū)?dǎo)航器對象作為屬性傳遞給了我們的FirstPageComponent，那么我們此時就可以獲取這個navigator對象，navigator中有很多方法可以供我們調(diào)用進行導(dǎo)航。

首先我們給創(chuàng)建一個可點擊的區(qū)域包裹Text，這樣點擊Text就可以觸發(fā)事件，如下所示，改造render，

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

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

然后我們實現(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對象的名稱和組件對象，將其放入路由棧，這樣我們通過操控路由棧的方式實現(xiàn)了另一個頁面的跳轉(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>點我跳轉(zhuǎn)</Text>
        </TouchableOpacity>
      </View>
      );
  }
}

其中SecondPageComonent是我們定義的另一個組件，實現(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>點我跳轉(zhuǎn)回去</Text>
        </TouchableOpacity>
      </View>
      );
  }
}

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

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

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

參數(shù)的傳遞

當(dāng)我們從一個頁面跳轉(zhuǎn)到另一個頁面的時候，總免不了需要進行參數(shù)的傳遞，那么我們怎么將參數(shù)傳遞到另一個頁面呢？

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

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

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

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

首先我們更改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} />
      }
    }}

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

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

如果當(dāng)我們返回的時候需要攜帶參數(shù)，我們可以通過給navigator設(shè)置一個回調(diào)方法，用于給第一個頁面設(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)的頁面，也就是啟動app之后會看到的第一屏，需要兩個參數(shù)，name跟component
     initialRoute={{ name: defaultName, component: defaultComponent }}
     configureScene={(route) => {
      //跳轉(zhuǎn)的動畫
      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>
      );
  }
}

最終效果如下所示：