有人可以用简单的术语解释“在顶层组件上调用导航”

Question

https://reactnavigation.org/docs/navigators/

我正在阅读上面链接中的文档，但我没有理解“正确调用顶层组件导航”部分。有人可以解释这是做什么的。我确实尝试在线查看，但没有找到任何简单解释这一点的资源。

我主要需要帮助理解以下代码：

this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params });

和

<AppNavigator ref={nav => { this.navigator = nav; }} />

下面给出了整个代码

const AppNavigator = StackNavigator(SomeAppRouteConfigs);

class App extends React.Component {
  someEvent() {
    // call navigate for AppNavigator here:
    this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params });
  }

  render() {
    return (
      <AppNavigator ref={nav => { this.navigator = nav; }} />
    );
   }
}

Answer 1

首先。 AppNavigator是您的应用程序路由器定义。它看起来像

const AppNavigator=StackNavigator({
    Default:{screen: Page1},
    Favorite:{screen: Page3}
},
{initialRouteName: 'Default'}
)

如果您想在所有页面中设置一些操作。也许快速链接。 示例像这样

在顶级组件中，您无法使用＆＃34; this.props.navigation.navigate（）＆＃34;

参考：StackNavigator

要在顶级组件中使用导航。

你可以使用＆＃34; ref＆＃34;将AppNavigator导航器分配给＆＃34;顶级组件＆＃34;变量

在这种情况下，我们定义变量是导航器

<AppNavigator ref={nav => { this.navigator = nav; }} />

并使用以下代码导航到您的目的地

this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName:'Favorite', params:'' });

参考：dispatch