DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript技巧 >> ReactNative頁面跳轉Navigator實現的示例代碼
ReactNative頁面跳轉Navigator實現的示例代碼
編輯：JavaScript技巧     

本文介紹了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對象的一系列方法通過對路由棧的操控來實現頁面之間跳轉加載的功能的，我們看一下導航器都有那些方法：

  1. getCurrentRoutes() - 獲取當前棧裡的路由，也就是push進來，沒有pop掉的那些。
  2. jumpBack() - 跳回之前的路由，當然前提是保留現在的，還可以再跳回來，會給你保留原樣。
  3. jumpForward() - 上一個方法不是調到之前的路由了麼，用這個跳回來就好了。
  4. jumpTo(route) - 跳轉到已有的場景並且不卸載。
  5. push(route) - 跳轉到新的場景，並且將場景入棧，你可以稍後跳轉過去
  6. pop() - 跳轉回去並且卸載掉當前場景
  7. replace(route) - 用一個新的路由替換掉當前場景
  8. replaceAtIndex(route, index) - 替換掉指定序列的路由場景
  9. replacePrevious(route) - 替換掉之前的場景
  10. immediatelyResetRouteStack(routeStack) - 用新的路由數組來重置路由棧
  11. popToRoute(route) - pop到路由指定的場景，其他的場景將會卸載。
  12. 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>
      );
  }
}

最終效果如下所示：


以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。

JavaScript技巧
淺談ES6新增的數組方法和對象
es6新增的遍歷數組的方法,後面都會用這個方法來遍歷數組,或者對象,還有set,maplet arr
React Native之ListView實現九宮格效果的示例
概述在安卓原生開發中，ListView是很常用的一個列表控件，那麼React Native（RN）如
Javascript實現跨域後台設置攔截的方法詳解
本文主要給大家介紹了關於Javascript跨域後台設置攔截的相關內容，分享出來供大家參考學習，話不

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
ES6新數據結構Map功能與用法示例 ReactNative頁面跳轉Navigator實現的示例代碼 ES6使用let命令更簡單的實現塊級作用域實例分析 基於Echarts 3.19 制作常用的圖形(非靜態) JS實現移動端判斷上拉和下滑功能 JavaScript中閉包的詳解 Bootstrap實現的經典柵格布局效果實例【附demo源碼】 js如何編寫簡單的ajax方法庫 如何使用Bootstrap 按鈕實例詳解 利用js查找數組中指定元素並返回該元素的所有索引示例
熱門推薦
JavaScript+Html5實現按鈕復制文字到剪切板功能(手機網頁兼容) 使用JavaScript實現表格編輯器(實例講解) Bootstrap實現的經典柵格布局效果實例【附demo源碼】 超級簡易的JS計算器實例講解(實現加減乘除) ES6新特性之解構、參數、模塊和記號用法示例 整理關於Bootstrap過渡動畫的慕課筆記 JavaScript如何一次性展示幾萬條數據 利用JavaScript實現棧的數據結構示例代碼 Javascript類型系統之undefined和null淺析
大家都在看
DOM基礎教程之使用DOM + Css JavaScript顯示當前文檔最後修改日期的方法教程 設計欣賞:60個強烈的質感的LOGO設計作品 JS實現點擊按鈕後框架內載入不同網頁的方法 Javascript模擬的DOS窗口 js中浮點型運算BUG的解決方法說明 用戶需求分析設計:用戶研究的關鍵 jQuery獲取table表中的td標簽(實例講解)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved