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入门教程(8) Location地址对象
Jan 31 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
vue el-table实现行内编辑功能
Dec 11 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 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 数据结构 算法 三元组 Triplet
2011/07/02 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
javascript使用call调用微信API
2014/12/15 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
小程序实现多选框功能
2018/10/30 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
python简单实例训练(21~30)
2017/11/15 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
交通事故赔偿协议书
2014/04/15 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
购房委托书
2014/10/15 职场文书
2014年宣传工作总结
2014/11/18 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js