使用导航键

最新推荐文章于 2021-06-28 18:00:55 发布

原创最新推荐文章于 2021-06-28 18:00:55 发布 · 621 阅读

0 ·

CC 4.0 BY-SA版权

React Navigation 专栏收录该内容

16 篇文章

订阅专栏

本文深入探讨了在导航功能中关键参数key的使用方法，包括如何利用key进行路由的唯一标识，实现同一路由的多次实例化及精确的回退操作。通过具体代码示例，展示了在React Native中使用StackRouter时，key参数对navigate和goBack方法的影响。

参数：key 在不同的导航功能中会反复使用到，今天让我们看一下其主要的用法。

navigate 的调用方法

如果没有提供key，StackRouter的行为如下：

如果已经存在具有给定名称的路由，StackRouter将跳转到现有路由，同时设置新参数。

如果不存在这样的路由，StackRouter会将它推入堆栈。

但是如果您要推送相同路由的多个实例，则每次调用navigate时都可以通过提供唯一的key参数来实现此操作，或者可以使用StackRouter上的push操作。

goBack 方法也会用到key

goBack就是关闭当前页面并返回上一个页面。我们可以为其提供一个key，指定要返回的路由。默认情况下，goBack将关闭调用该方法的页面如果目标是从任意的位置返回，而不指定要关闭的内容，请调用goBack（null）.需要注意的是，null在嵌套stackNavigators的情况下很有用，如果子导航器在堆栈中已经只有一个项目，则返回副导航器。如果i仍然不理解，不用担心，这需要下一些功夫。

注意键不是路由的名称，而是您导航到该路由时提供的唯一的标识符。

class HomeScreen extends React.Component {
  render() {
    const { goBack } = this.props.navigation;
    return (
      <View>
        <Button onPress={() => goBack()} title="Go back from this HomeScreen" />
        <Button onPress={() => goBack(null)} title="Go back anywhere" />
        <Button
          onPress={() => goBack('key-123')}
          title="Go back from key-123"
        />
      </View>
    );
  }
}