React-Native之Navigator

原创 2017年01月03日 15:43:09

Navigator 简单使用。详细介绍,请看React-Native中文官网#navigator


  • navigator 单标签
<Navigator />
  • navigator 三个重要属性
/* 关键代码 */
import RootView from '您的路径';/* RootView 首字母大写 */

var rootRoute = {
    component: RootView,//组件
    title: this.state.title,
    /* 这里除了component外,其余多参数的话,可以合并参数param: json */
};

<Navigator 
    /* 根路由 */
    initialRoute={rootRoute}

    /* 场景跳转配置 */
    configureScene={(route) => {
        return Navigator.SceneConfigs.PushFromRight;
    }}

    /* 场景渲染 */
    renderScene={(route, navigator) =>{
        var Component = route.component;
        return (
            <Component 
                navigator={navigator}
                title={route.title}
                //传参 可以在这里设置属性 通过route.title
            />
        );
    }}
    style={{flex: 1}}
/>
  • navigator 跳转
    /* push的页面 */
    var nextRoute = {
        component: MessageComponent,//新页面
        title: str,
    };

    this.props.navigator.push(nextRoute);
    //this.props.navigator.pop();

个人笔记

版权声明:本文为博主原创文章,未经博主允许不得转载。

React-Native学习笔记之:导航器Navigator实现页面间跳转

Navigator用来实现不同页面的切换,想设置Navigator,必须确定一个或多个调用routes对象,去定义每个场景。 还可以利用renderScene方法,导航栏可以根据指定的路由来渲染场景。...
  • true100
  • true100
  • 2017年04月17日 10:03
  • 2454

React—native 之 Navigator (导航路由)组件

# React Native 的 Navigator 组件 > 欢迎Follow我的GitHub: https://github.com/SpikeKing **React Nat...
  • QTFYING
  • QTFYING
  • 2016年12月07日 17:17
  • 757

《React-Native系列》6、Navigator语法介绍及经典应用

今天来介绍下ReactNative的Navigator组件。 先来看看官网是怎么说的: 使用导航器可以让你在应用的不同场景(页面)间进行切换。导航器通过路由对象来分辨不同的场景。利用renderSce...
  • hsbirenjie
  • hsbirenjie
  • 2016年07月28日 22:38
  • 5923

React-Native中navigator.pop()后如何更新前一个页面

1、问题提出React-Native中navigator.pop()后如何更新前一个页面,这是一个最为常见得问题。2、问题的描述比如说,我们开发应用的时候,上传头像是一个最为常见的功能,我点击选择打开...
  • u010046908
  • u010046908
  • 2016年09月06日 21:28
  • 7436

React_Native 再学习1——从建立到初识导航

React_Native 再学习1——从建立到初识导航 重新开一个android项目,一点点弄懂react-native各个api的作用: 项目建立: (环境搭建就不再赘述了) 1、   ...
  • u011486491
  • u011486491
  • 2017年12月04日 17:54
  • 47

【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2294.html本...
  • xiaominghimi
  • xiaominghimi
  • 2016年06月02日 12:08
  • 4690

React-native页面跳转传值实现

首先是index.android.js 我们需要用到Navigator来进行页面的跳转,所有的js文件处于同一目录下面, 在FirstPageComponent页面中我们需要定义好参数: con...
  • hjjoe1213123
  • hjjoe1213123
  • 2016年02月25日 09:53
  • 16537

React-native 尝鲜计划-场景切换(Navigator)

在上篇文章《react-native 尝鲜计划-环境搭建》中讲述了react-native 的环境搭建,并初始化了 react-native 的第一个项目。如果你已经完成了上一片文章的学习,并且成功调...
  • huangjijie123456
  • huangjijie123456
  • 2015年11月21日 14:41
  • 3330

【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件讲解(13)

(一)前言        【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org         今天我们一起来看一下抽屉D...
  • jiangqq781931404
  • jiangqq781931404
  • 2016年01月28日 13:13
  • 7911

【REACT NATIVE 系列教程之五】NAVIGATOR(页面导航)的基本使用与传参

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2248.html今...
  • xiaominghimi
  • xiaominghimi
  • 2016年05月24日 18:30
  • 3279
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React-Native之Navigator
举报原因:
原因补充:

(最多只允许输入30个字)