移动应用很少只包含一个页面。从你添加第二个页面开始,就得考虑如何管理多个页面间的跳转了。

导航器正是为此而生。它可以管理多个页面间的跳转,也包含了一些常见的过渡动画,包括水平翻页、垂直弹出等等。

Navigator

React Native目前有几个内置的导航器组件,一般来说我们首推Navigator。它使用纯JavaScript实现了一个导航栈,因此可以跨平台工作,同时也便于定制。

场景(Scene)的概念与使用

无论是View中包含Text,还是一个排满了图片的ScrollView,渲染各种组件现在对你来说应该已经得心应手了。这些摆放在一个屏幕中的组件,就共同构成了一个“场景(Scene)”。

场景简单来说其实就是一个全屏的React组件。与之相对的是单个的TextImage又或者是你自定义的什么组件,仅仅占据页面中的一部分。你其实已经不知不觉地接触到了场景——在前面的教程中,“编写HelloWorld”“使用Flexbox布局”“如何使用ListView”中的组件都是完整的场景示例。

下面我们来定义一个仅显示一些文本的简单场景。创建一个名为“MyScene.js”的文件,然后粘贴如下代码:

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class MyScene extends Component {
  static get defaultProps() {
    return {
      title: 'MyScene'
    };
  }

  render() {
    return (
      <View>
        <Text>Hi! My name is {this.props.title}.</Text>
      </View>
    )
  }
}

注意组件声明前面的export default关键字。它的意思是导出(export)当前组件,以允许其他组件引入(import)和使用当前组件,就像下面这样(下面的代码你可以写在index.ios.js或是index.android.js中):

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';

// ./MyScene表示的是当前目录下的MyScene.js文件,也就是我们刚刚创建的文件
// 注意即便当前文件和MyScene.js在同一个目录中,"./"两个符号也是不能省略的!
// 但是.js后缀是可以省略的

import MyScene from './MyScene';

class YoDawgApp extends Component {
  render() {
    return (
      <MyScene />
    )
  }
}

AppRegistry.registerComponent('YoDawgApp', () => YoDawgApp);

我们现在已经创建了只有单个场景的App。其中的MyScene同时也是一个可复用的Reac组件的例子。

使用Navigator

场景已经说的够多了,下面我们开始尝试导航跳转。首先要做的是渲染一个Navigator组件,然后通过此组件的renderScene属性方法来渲染其他场景。

render() {
  return (
    <Navigator
      initialRoute={{ title: 'My Initial Scene', index: 0 }}
      renderScene={(route, navigator) => {
        <MyScene title={route.title} />
      }}
    />
  );
}

使用导航器经常会碰到“路由(route)”的概念。“路由”抽象自现实生活中的路牌,在RN中专指包含了场景信息的对象。renderScene方法是完全根据路由提供的信息来渲染场景的。你可以在路由中任意自定义参数以区分标记不同的场景,我们在这里仅仅使用title作为演示。

将场景推入导航栈

要过渡到新的场景,你需要了解pushpop方法。这两个方法由navigator对象提供,而这个对象就是上面的renderScene方法中传递的第二个参数。 我们使用这两个方法来把路由对象推入或弹出导航栈。

navigator.push({
  title: 'Next Scene',
  index: 1,
});

navigator.pop();

下面是一个更完整的示例:

import React, { Component, PropTypes } from 'react';
import { Navigator, Text, TouchableHighlight, View } from 'react-native';

export default class SimpleNavigationApp extends Component {
  render() {
    return (
      <Navigator
        initialRoute={{ title: 'My Initial Scene', index: 0 }}
        renderScene={(route, navigator) =>
          <MyScene
            title={route.title}

            // 推入新场景所调用的方法
            onForward={() => {
              const nextIndex = route.index + 1;
              navigator.push({
                title: 'Scene ' + nextIndex,
                index: nextIndex,
              });
            }}

            // 返回上一个场景所调用的方法
            onBack={() => {
              if (route.index > 0) {
                navigator.pop();
              }
            }}
          />
        }
      />
    )
  }
}

class MyScene extends Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
    onForward: PropTypes.func.isRequired,
    onBack: PropTypes.func.isRequired,
  }
  render() {
    return (
      <View>
        <Text>Current Scene: { this.props.title }</Text>
        <TouchableHighlight onPress={this.props.onForward}>
          <Text>Tap me to load the next scene</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={this.props.onBack}>
          <Text>Tap me to go back</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

在这个例子中,MyScene通过title属性接受了路由对象中的title值。它还包含了两个可点击的组件TouchableHighlight,会在点击时分别调用通过props传入的onForwardonBack方法,而这两个方法各自调用了navigator.push()navigator.pop(),从而实现了场景的变化。

React Native之Navigator的更多相关文章

  1. React Native导航器Navigator

    React Native导航器Navigator 使用导航器可以让你在应用的不同场景(页面)间进行切换.导航器通过路由对象来分辨不同的场景.利用renderScene方法,导航栏可以根据指定的路由来渲 ...

  2. React Native之 Navigator与NavigatorIOS使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  3. react native 导航器 Navigator 简单的例子

    最近学习react native 是在为全栈工程师而努力,看网上把react native说的各种好,忍不住学习了一把.总体感觉还可以,特别是可以开发android和ios这点非常厉害,刚开始入门需要 ...

  4. react native的Navigator组件示例

    import React, {Component} from 'react';import {ScrollView, StyleSheet, Text, View, PixelRatio} from ...

  5. React Native使用Navigator组件进行页面导航报this.props....is not a function错误

    在push的时候定义回调函数: this.props.navigator.push({ component: nextVC, title: titleName, passProps: { //回调 g ...

  6. React Native中Navigator的安装与使用

    一.安装Navigator 1.安装react-native-deprecated-custom-components npm install react-native-deprecated-cust ...

  7. React Native APP结构探索

    APP结构探索 我在Github上找到了一个有登陆界面,能从网上获取新闻信息的开源APP,想来研究一下APP的结构. 附上原网址:我的第一个React Native App 具体来讲,就是研究一个复杂 ...

  8. iOS 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

  9. 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

随机推荐

  1. js黑魔法

    清空一个数组 一直以来,清空一个数组都是var i = [1,2,3]; i = [];,习惯成自然,被自己坑了. 举个例子 var i = [1,2,3]; var obj = {val: i}; ...

  2. jvm 指令集代码

    指令码 助记符 说明 0x00 nop 什么都不做 0x01 aconst_null 将null推送至栈顶 0x02 iconst_m1 将int型-1推送至栈顶 0x03 iconst_0 将int ...

  3. Sprk SQL

    一.Spark SQL概述  1.Spark SQL的前生今世 Shark是一个为Spark设计的大规模数据仓库系统,它与Hive兼容.Shark建立在Hive的代码基础上,并通过将Hive的部分物理 ...

  4. 焦点轮播图(tab轮播)

    主要有两部分:1.列表导航(小图片) 2.展示区(大图片) 页面布局: HTML部分:    <div class="s_conC">                  ...

  5. R语言do.call 函数用法详解

    虽然R语言有类型很丰富的数据结构,但是很多时候数据结构比较复杂,那么基本就会用到list这种结构的数据类型.但是list对象很难以文本的形式导出,因此需要一个函数能快速将复杂的list结构扁平化成da ...

  6. PHP Zip File 函数

    通过 PHP 中的相关函数,你可以实现 zip 文件的解压缩操作! PHP Zip File 简介 Zip File 函数允许您读取压缩文件. 安装 如需在服务器上运行 Zip File 函数,必须安 ...

  7. JavaScripy execCommand函数

    execCommand函数命令 execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用如下格式:document.execCommand(sCommand[ ...

  8. 状态模式、职责链模式——省去if-else的繁琐结构

    小时候写日记都是这么写的:上午七点起床,八点之前洗脸刷牙吃早饭,十二点之前好好上课,中午一点,吃午饭,下午两点到六点,上课,下课,找请假,明天妈妈要带我去姥姥家,九点之前,看动画片,九点钟,收拾去姥姥 ...

  9. 【Android 应用开发】 Android 各种版本简介 ( Support 支持库版本 | Android Studio 版本 | Gradle 版本 | jcenter 库版本 )

    初学者遇到 Android Studio, 导入工程后, 会出现各种奇葩错误, 如果管理好各个插件, gradle, SDK, SDK Tools, 各种官方依赖库 的版本, 会将错误大大的减少; 这 ...

  10. 数据库查询优化——Mysql索引

    工作一年了,也是第一次使用Mysql的索引.添加了索引之后的速度的提升,让我惊叹不已.隔壁的老员工看到我的大惊小怪,平淡地回了一句"那肯定啊". 对于任何DBMS,索引都是进行优化 ...