React Navigation 指南 2：屏幕切换

在上一节“Hello React Navigation”中，我们定义了一个带有两个路由（Home和Details），下面来看如何从Home调到Details。
在浏览器中我们这样实现跳转：

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

或者用另一种方法

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

下面看在React Navigation中的实现。

1. 跳转到新的屏幕

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator } 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>
    );
  }
}

// ... other code from the previous section

说明：

• this.props.navigation：传递给StackNavigator中每个屏幕组件的navigation属性。
• navigate('Details')：调用属性navigation上的函数navigate，参数是路由名称。实现屏幕组件跳转。
  

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

现在有两个路由，Home和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>
    );
  }
}

当点击button按钮时，它什么也不会做（注意：这是和1.x版本中不同的地方，在1.x版本中，会向导航栈中压入一个新的屏幕）。
如果想向导航栈中添加一个屏幕，则需要用到push：

<Button
  title="Go to Details... again"
  onPress={() => this.props.navigation.push('Details')}
/>

2. 返回

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

如果在程序中触发该行为，可以调用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.push('Details')}
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

在Android平台上，React Navigation会把goBack()函数关联到硬件返回按键，所以点击物理回退按键能达到同样的效果。

3. 返回多个屏幕

另一个常见的要求是能够返回多个屏幕 。
例如，如果您在堆栈中有几个屏幕深度，并且想要将它们全部撤回到第一个屏幕。在这种情况下，我们知道我们想要回去Home我们可以使用navigate('Home')。另一种选择是navigation.popToTop()，可以回到堆栈中的第一个屏幕。
如果现在的导航栈是这样：A -> B -> C，从页面C返回到A在1.x中处理这个事情很麻烦，在2.x中使用navigate('A')就可以达到回退多个页面的目的。

4. 总结

• this.props.navigation.navigate('RouteName')：如果堆栈导航器尚未位于堆栈中，则将新路线推送到堆栈导航器中，否则会跳转到该屏幕。
• 我们可以用this.props.navigation.push('RouteName')继续在栈中压入路由。
• 标题栏将自动显示后退按钮，但也可以通过调用以编程方式返回this.props.navigation.goBack()。在Android上，硬件后退按钮按同样会达到返回效果。
• 可以通过this.props.navigation.navigate('RouteName')返回到栈中已有的屏幕。所以，navigate()既有压入新栈的作用，又有回退的作用。
• 该navigation属性可用于所有屏幕组件（在路由配置中定义为屏幕的组件以及输出为React Navigation的组件）。