React Navigation 基础 3 : 屏幕间切换

屏幕间切换

在上一节中，我们定义了一个StackNavigator,带有两个路由 (Home和Details),但是我们没有学习如何让用户从Home跳到Details。

如果是在浏览器中，我们能够写出这样的代码用于页面跳转:

<a href="details.html">Go to Details</a>

或者这个样子 :

<a onClick={() => { document.location.href = "details.html"; }}>Go to Details</a>

这里我们要做一些和上面第二种方式类似的事情，但是不是使用全局document对象，而是使用传递给我们的屏幕(screen)组件的导航属性(navigation)。

导航到一个新的屏幕

import React from 'react';
import { Button, View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

// ... 和上一节一样的其他代码

→执行这段代码

我们来剖析一下这段代码：

• this.props.navigation : 传递给StackNavigator中每个**屏幕组件screen component**的navigation导航属性。(关于StackNavigator更多信息请看这里)
• navigate('Details') : 调用属性navigation上的函数navigate,参数是目标屏幕的路由名称。

调用方法this.props.navigation.navigate时提供的路由名称如果不是我们在StackNavigator中定义的，那什么都不会发生。换句话讲，我们只能跳到我们自己的StackNavigator上定义的路由 – 我们不能跳往随意一个组件。

现在我们已经有了一个栈式导航器了，带两个路由1)Home,2)Details。那么假如我们从Details屏幕再跳到Details屏幕，会发生什么呢 ?

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details... again"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

→ 执行这段代码

如果你执行了这段代码，你会注意到每次你按了按钮"Go to Details… again",它会压入一个新的屏幕。这一点是我们原来和document.location.href作比较不同的地方。浏览器不会把它当成不同的路由然后加到浏览历史中 – 而 StackNavigator的navigate更像是Web中的window.history.pushState:每次调用它，它都会往导航栈中增加新的路由。

返回

当有可能从当前活跃屏幕返回时，StackNavigator会在当前活跃屏幕的头部自动包含一个返回按钮(如果导航栈中只有一屏，没有什么能返回的，所以也不存在返回按钮)。

有时候你想要程序中触发该行为，那你可以调用 this.props.navigation.goBack(); :

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details... again"
          onPress={() => this.props.navigation.navigate('Details')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

→ 执行这段代码

在Android平台上，React Navigation会把goBack()函数关联到硬件返回按键，所以它的表现会和用户预期的一致。

另外一个常见的需求是返回好多屏–比如，你在一个栈里好几屏深的一屏上，现在你想跳过这些屏回到第一屏。在"Building a sign in flow"中我们会讨论怎么做这件事情。

总结

• this.props.navigation.navigate('RouteName') 向StackNavigator压入新的一个路由. 喜欢的话可以多次调用它，它会继续压入路由。
• 头部会自动显示一个返回按钮，不过你也可以程序化触发返回: this.props.navigation.goBack(). 在Android上, 硬件设备上的返回按键会按照预期工作。
  -导航属性在所有屏幕组件上可用 (在路由配置中被定义为屏幕的组件，会被React Navigation渲染成一个路由).
  – 目前为止所有的源代码

英文原文

该系列文章目录

React Navigation 基础 8 : 术语词汇表
React Navigation 基础 7 : 全屏模态
React Navigation 基础 6 : 头部按钮
React Navigation 基础 5 : 配置导航头部
React Navigation 基础 4 : 屏幕间切换参数传递
React Navigation 基础 3 : 屏幕间切换
React Navigation 基础 2 : Hello React Navigation
React Navigation 基础 1: 开始使用