专栏首页向治洪React Native之Navigator

React Native之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(),从而实现了场景的变化。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React快速入门

    正好旁边前端的兄弟最近在学习React,为了更深入的了解前端的业态,也果断来学习一发,目标是有个基础的了解,需要时能快速上手就OK,说实话,个人并不是很喜欢它的...

    用户1216676
  • Vuejs和其他前端框架的对比

    React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composabl...

    xiangzhihong
  • webpack+react环境搭建

    前言 我们知道前端的框架纷繁复杂,各有各的优点。而我们选择使用React作为开发框架的时候,往往会选择Webpack+Babel+React来开始我们的项目。之...

    xiangzhihong
  • Parcel,零配置开发 React 应用!

    本文译自 Create a React app with zero configuration using Parcel。 webpack 已经经历三四年的发展...

    企鹅号小编
  • React 动画框架简介

    由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑,只会简...

    xiangzhihong
  • 我的职业是前端工程师【四】:如何选择合适的前端框架,告别选择恐惧症

    将 package.json 中的 Ionic 版本改为 2.0.0 的时候,我就思考一个问题。这个该死的问题是——我到底要用哪个框架继续工作下去。 刚开始学习...

    Phodal
  • MobX 在 React Native开发中的应用

    MobX 是一款精准的状态管理工具库,如果你在 React 和 React Native 应用中使用过 Flux、Alt、Redux 和 Reflux,那毫不犹...

    xiangzhihong
  • 微信小程序「官方示例代码」浅析【上】

    从某个微信群里,拿到了这个IDE的下载地址,然后就有了这个: ? 根本登不上去,怎么办,怎么办呢? 看代码啊。。。 反正我又没有保密协议,解压缩一看NodeW...

    Phodal
  • 「微信小程序」剖析(四):原生的实时DOM转Virtual DOM

    在之前的几篇文章里,我们讨论了MINA的一些原理。晚上在想着怎么结合Vux + Virtual Dom实现一个名为WINV框架的时候,在探索WCC功能才发现:自...

    Phodal
  • React Native调用原生组件

    在React Native开发过程中,有时候我们可能需要访问平台的API,但react Native还没有相应的实现,或者是React Native还不支持一些...

    xiangzhihong

扫码关注云+社区

领取腾讯云代金券