React Navigation 的使用基础部分（三）页面跳转

原文链接

       上一部分中我们定义了具有两个路由（主页Home和详情页Details）的栈导航器，但是我们没有学习怎样让使用者从Home跳转到Details。

       如果这是一个web浏览器，我们这样写：

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

另一种写法：

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

我们要对后者做同样的事，但并不是使用document，而是使用 已经传递到组件中的navigation属性

导航到新界面

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: navigation 属性已经传递到栈导航器中的每一个screen组件 (更多查看"The navigation prop in depth").
• navigate('Details'): 我们调用 navigate 函数 (在 navigation 属性中— 好名字都被占用了!) 参数事我们想要导航到的路由名称.

       如果我们调用 this.props.navigation.navigate  时目标路由名没有在栈导航器中定义，那么什么都不会发生。也就是说我们只能跳转到栈导航器中定义过的路由--不能跳转随意的组件。

       所以现在我们的栈中有两个路由（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>
    );
  }
}

如果运行这段代码，你会注意到当点击跳转按钮时什么也没发生！这是因为我们已经在Details页。navigate函数意思是"跳转到**页"，如果你已经在这页，那么什么都不会发生。假设我们确实是想要新增另一个Details页面。当我们想给每个路由传递不同的参数时这种需求就很普遍。要想实现这个需求，我们可以把navigate换成push。push允许我们新增一个路由，而不去考虑当前的历史栈中是否存在该路由。

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

每次调用push时，我们在导航栈中新增了一个路由。当调用navigate时，首先会去找同名的已经存在的路由，只有找不到时，才会push一个新的路由。

Going back

当前页面可以返回时，栈导航器提供的header自动包含一个返回按键（如果导航栈中只有一个screen，没法返回，那么就没有返回键）

有时候你想在代码中触发该行为，就可以使用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>
    );
  }
}

在安卓中，React Navigation关联了物理返回键，当用户点击时，就会触发goBack（）函数。

另一种常见的需求时返回多个页面--例如，如果栈中有多个页面，你想关闭所有界面返回第一个。在这种情况下，我们知道我想返回Home页，所以我们能使用navigate（’Home‘）(不是push！可以尝试以下看看有何不同)。另一种方法时navigate.popToTop(),返回栈中的第一个界面。

总结：

• this.props.navigation.navigate('RouteName') 如果栈中没有该路由，则新增一个，如果有的话直接跳转过去。
• this.props.navigation.push('RouteName') 我们可以想调用多少次就调用多少次，他会持续的往栈中push路由。
• 导航栏会自动显示返回按钮，你也能在调用 this.props.navigation.goBack()来返回。在安卓中，物理返回键会按照预期来返回。
• 你可以公国 this.props.navigation.navigate('RouteName')来返回栈中已存在的界面，也能通过this.props.navigation.popToTop()返回栈中的第一个界面。
• navigation 所有的screen组件都能使用该属性 。