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 相关文章推荐
js活用事件触发对象动作
Aug 10 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 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 If Else(elsefi) 语句
2013/04/07 PHP
php获取操作系统语言代码
2013/11/04 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
PHP文件上传类实例详解
2016/04/08 PHP
PHP实现微信对账单处理
2018/10/01 PHP
JavaScript使用cookie
2007/02/02 Javascript
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
Python中字符串的处理技巧分享
2016/09/17 Python
python下载图片实现方法(超简单)
2017/07/21 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Python的log日志功能及设置方法
2019/07/11 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
电工工作职责范本
2014/02/22 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
个人查摆剖析材料
2014/10/16 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
立项申请报告范本
2015/05/15 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js