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


Posted in Javascript onAugust 02, 2017

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

最终效果如下所示:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 设计模式学习 Factory
Jul 29 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
jquery自适应布局的简单实例
May 28 Javascript
详解vue express启动数据服务
Jul 05 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
js实现自动锁屏功能
Jun 02 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 #Javascript
easyui-datagrid开发实践(总结)
Aug 02 #Javascript
js如何编写简单的ajax方法库
Aug 02 #Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 #Javascript
基于jquery实现多选下拉列表
Aug 02 #jQuery
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 #Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 #Javascript
You might like
介绍一些PHP判断变量的函数
2012/04/24 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
PHP类的封装与继承详解
2015/09/29 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
详解Python核心对象类型字符串
2018/02/11 Python
python判断设备是否联网的方法
2018/06/29 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
django使用channels实现通信的示例
2020/10/19 Python
python 基于wx实现音乐播放
2020/11/24 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
医药个人求职信范文
2014/01/29 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
高中生逃课检讨书
2014/10/10 职场文书
2014年小学工作总结
2014/11/26 职场文书
材料员岗位职责
2015/02/10 职场文书
学校党支部承诺书
2015/04/30 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android