ReactNative页面跳转Navigator实现的示例代码

原文

本文介绍了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>
      );
  }
}

最终效果如下所示：


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。

ReactNative页面跳转Navigator实现的示例代码的更多相关文章

  1. vue打包chunk-vendors.js文件过大导致页面加载缓慢的解决

    这篇文章主要介绍了vue打包chunk-vendors.js文件过大导致页面加载缓慢的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

  2. 微信小程序实现页面导航的方法详解

    这篇文章主要为大家详细介绍一下微信小程序实现页面导航的几种方法以及帮助大家掌握如何使用页面之间的导航跳转，感兴趣的可以了解一下

  3. js 页面执行时间计算代码

    一个可以用来计算当前页面的执行时间，方便控制页面的大小等一系列影响页面执行效率的东西

  4. 关于Vue3路由push跳转问题(解决Vue2this.$router.push失效）

    这篇文章主要介绍了Vue3路由push跳转问题(解决Vue2this.$router.push失效）,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  5. 在jsp页面中响应速度提高的7种方法分享

    这篇文章介绍了在jsp页面中响应速度提高的7种方法，有需要的朋友可以参考一下

  6. 详解php实现页面静态化原理

    本篇文章主要介绍了详解php实现页面静态化原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  7. JSP页面间传值问题实例简析

    这篇文章主要介绍了JSP页面间传值问题,结合实例形式简单分析了JSP页面中使用get方式传值的使用技巧,需要的朋友可以参考下

  8. jsp页面中引用其他页面的简单方法

    下面小编就为大家带来一篇jsp页面中引用其他页面的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  9. jquery 仿锚点跳转到页面指定位置的实例

    下面小编就为大家带来一篇jquery 仿锚点跳转到页面指定位置的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  10. 解决VuePress页面乱码问题

    这篇文章主要介绍了解决VuePress页面乱码问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现，如何实现爱心点赞功能，这篇文章主要为大家详细介绍了jquery点赞功能实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念，例如类、对象、属性、方法等面向对象的术语，并以实例讲解各种术语的使用，非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部