React Native 之 Using Navigators

---

移动应用程序很少由只是一个屏幕。一旦你第二个屏幕添加到您的应用程序,你需要考虑用户如何从一个屏幕导航到另一个。

您可以使用导航器来过渡多个屏幕。这些过渡可以左右典型动画主/明细 堆栈,或垂直模态弹出窗口。

Navigator

RN有几个内置导航组件,但是对于你的第一个应用程序您可能会希望使用导航器。它提供了一个JavaScript实现导航堆栈,因此它适用定制iOS和Android。

Working with Scenes

此时你应该感到舒适、呈现各种各样的组件在应用程序、一个简单的视图与文本内部,或滚动视图的图像。这些组件组合在一起构成一个场景(屏幕)在你的应用。

一个场景只不过是一个React组件,通常呈现全屏。这与一个文本,图像,甚至自定义SpinningBeachball组件、呈现为一个屏幕的一部分。你可能已经习惯没有意识——“HelloWorldApp”、“FlexDirectionBasics”和“ListViewBasics”组件覆盖之前的教程都是场景的例子。

为简单起见,让我们定义一个简单的场景——显示文本。稍后我们将回到这个场景当我们添加导航应用。创建一个新文件称为“MyScene.js”下面的内容:

import React, { Component } from 'react';
import { View, Text, Navigator } 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默认组件声明。这将export 组件,从而使其他组件以后import ,像这样:

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

import MyScene from './MyScene';

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

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

我们现在有一个简单的应用程序,它显示你的场景。在这种情况下,MyScene是一个简单的例子,一个可重用的组件的React 。

Using Navigator

足够的场景,让我们开始浏览。首先我们将render一个Navigator,然后让Navigator render scene —— 通过在自己的render 函数renderScene prop。

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

你会遇到很多、在处理导航路线的概念。路线是一个对象,它包含一个场景信息。它是用来提供所有上下文导航器的renderScene函数需要render 的场景。它可以拥有任意数量的keys 来帮助区分你的场景,我碰巧选一个标题上面的例子的关键。

Pushing scenes onto the stack

为了过渡到一个新的场景,您需要了解push 和pop。这两个方法提供的导航对象传递给你的renderScene函数。他们可以使用,正如你可能已经意识到,push 和pop routes 到 导航堆栈。

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

navigator.pop();

更完整的示例,演示如何pushing 和popping routes 。编辑你的index*.js文件、看起来像这样:

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

import MyScene from './MyScene';

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

            // Function to call when a new scene should be displayed           
            onForward={ () => {    
              const nextIndex = route.index + 1;
              navigator.push({
                title: 'Scene ' + nextIndex,
                index: nextIndex,
              });
            }}

            // Function to call to go back to the previous scene
            onBack={() => {
              if (route.index > 0) {
                navigator.pop();
              }
            }}
          />
        }
      />
    )
  }
}

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

MyScene.js：

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

export default 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组件通过titleprop传递当前的route。它显示两个tappable组件调用onForward和onBack函数通过props,这反过来将调用navigator.push()和navigator.pop()。

参考 Navigator API 更多导航代码示例,或者阅读导航指南的其他例子。

High Five!

如果你已经在这里通过线性阅读教程,那么你是一个非常令人印象深刻的人。祝贺你。接下来,您可能想查看所有与React Native有关的社区。

---

关注公众号：

                       

                                              更多精彩文章等你来！！！

---

[1]:参考文献 http://facebook.github.io/react-native/docs/using-navigators.html