当前位置: 开发笔记 > Android > 正文

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

作者：mobiledu2502872825 | 来源：互联网 | 2022-10-12 12:42

本文介绍了ReactNative页面跳转Navigator，分享给大家。具体如下： 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 
  }}

通过上面的方法来实现页面的跳转，同时将导航器作为属性进行传递过去。之前说过，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 
      }
    }}

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 (
     {
      //跳转的动画
      return Navigator.SceneConfigs.FadeAndroid;
     }}
     renderScene={(route, navigator) => {
      let CompOnent= route.component;
      if(route.component){
        return 
      }
     }} />
    );
  }
} 

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 (
      
        我是默认页面
      
      );
  }
}

如果我们现在想要实现一个从FirstPageComponent到另一个页面之间的跳转，那我们需要怎么做呢？

因为我们之前在页面跳转的时候将导航器对象作为属性传递给了我们的FirstPageComponent，那么我们此时就可以获取这个navigator对象，navigator中有很多方法可以供我们调用进行导航。

首先我们给创建一个可点击的区域包裹Text，这样点击Text就可以触发事件，如下所示，改造render，

  render() {
    return (
      
        
          点我跳转
        
      
    );
  }

我们先不关注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 (
      
        
          点我跳转
        
      
      );
  }
}

其中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 (
      
        
          点我跳转回去
        
      
      );
  }
}

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

我们所有的组件都是通过导航器加载到页面上的，第一个页面是，第二个页面并不是由第一个页面启动的，而是有导航器控制路由栈来显示在页面上的，我们在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 
      }
    }}

在这里就相当于将参数传递给了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 (
     {
      //跳转的动画
      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 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 (
      
        
          {this.state.resultMessage}
        
      
      );
  }
}

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 (
      
        
          {this.state.message}
        
      
      );
  }
}

最终效果如下所示：

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

推荐阅读

android
解决Android 8.0上使用ChinaCock打印控件时扫码闪退问题

本文详细探讨了在Android 8.0设备上使用ChinaCock的TCCBarcodeScanner进行扫码时出现的应用闪退问题，并提供了解决方案。通过调整配置文件，可以有效避免这一问题。 ... [详细]

蜡笔小新 2024-12-27 10:10:31
android
国内BI工具迎战国际巨头Tableau，稳步崛起

尽管商业智能（BI）工具在中国的普及程度尚不及国际市场，但近年来，随着本土企业的持续创新和市场推广，国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争，国内BI工具通过不断优化产品和技术，赢得了越来越多用户的认可。 ... [详细]

蜡笔小新 2024-12-28 11:12:44
android
使用arm-eabi-gdb调试Android C/C++应用程序的详细指南

本文详细介绍如何使用arm-eabi-gdb调试Android平台上的C/C++程序。通过具体步骤和实用技巧，帮助开发者更高效地进行调试工作。 ... [详细]

蜡笔小新 2024-12-28 10:25:18
android
深入理解 Oracle 存储函数：计算员工年收入

本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程，并提供完整的代码示例。 ... [详细]

蜡笔小新 2024-12-28 09:49:42
android
2018回顾与2019展望

本文总结了2018年的关键成就，包括职业变动、购车、考取驾照等重要事件，并分享了读书、工作、家庭和朋友方面的感悟。同时，展望2019年，制定了健康、软实力提升和技术学习的具体目标。 ... [详细]

蜡笔小新 2024-12-28 09:10:26
android
四载相伴，与51CTO学院共成长

在计算机技术的学习道路上，51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域，51CTO学院始终是我信赖的学习平台。 ... [详细]

蜡笔小新 2024-12-28 08:20:07
android
CSS 布局：液态三栏混合宽度布局

本文介绍了如何使用 CSS 实现液态的三栏布局，其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性，可以实现灵活且响应式的网页设计。 ... [详细]

蜡笔小新 2024-12-28 02:40:28
android
Linux 系统启动故障排除指南：MBR 和 GRUB 问题

本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案，涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]

蜡笔小新 2024-12-27 20:40:29
android
通过类型和标签选择元素

本文介绍了如何使用jQuery根据元素的类型（如复选框）和标签名（如段落）来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]

蜡笔小新 2024-12-27 19:44:14
android
如何在剪映中进行视频镜像处理

本文将详细介绍如何使用剪映应用中的镜像功能，帮助用户轻松实现视频的镜像效果。通过简单的步骤，您可以快速掌握这一实用技巧。 ... [详细]

蜡笔小新 2024-12-27 18:56:09
java
深入理解Cookie与Session会话管理

本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]

蜡笔小新 2024-12-27 18:20:43
android
Xcode 中多行代码缩进技巧

本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进，包括右缩进和左缩进的具体操作方法。 ... [详细]

蜡笔小新 2024-12-27 17:52:34
android
Linux 自动化安装脚本详解

本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建，还处理了系统服务的配置和启动，确保在多种 Linux 发行版上都能顺利运行。 ... [详细]

蜡笔小新 2024-12-27 16:33:32
android
在Linux系统中配置并启动ActiveMQ

本文详细介绍了如何在Linux环境中安装和配置ActiveMQ，包括端口开放及防火墙设置。通过本文，您可以掌握完整的ActiveMQ部署流程，确保其在网络环境中正常运行。 ... [详细]

蜡笔小新 2024-12-27 14:38:54
java
Android 渐变圆环加载控件实现

本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件，该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]

蜡笔小新 2024-12-27 13:34:19

mobiledu2502872825

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章