javascript - 如何从不是 HomeScreen 的组件内部访问 react-navigation？

Question

我正在构建一个 React Native 应用程序。我已经从 react-navigation 导入了 createStackNavigator。我能够让它在我的主屏幕上运行——我点击一个按钮，它把我带到一个新组件。这是我用来将其引入我的 Home.js 的代码

// src/components/Home/Home
export class Home extends Component {
  render() {
    return (
      <React.Fragment>
        <Button
          title="Test button"
          onPress={() => this.props.navigation.navigate('Roads')}
        />

        <StatusBar />
        <Header />
        <Menu />
      </React.Fragment>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: Home,
    Roads: Roads,
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

我的主页有一个菜单，其中有一个菜单项列表。我试图让 MenuItems 跳转到适当的页面。当我尝试在 MenuItem.js 的渲染方法中引入导航时，如下所示:

// src/components/Roads/Roads
  render() {
    const { navigate } = this.props.navigation;
    console.log(this.props, "props is here");

我收到以下错误消息:

TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')。

我是否需要将导航器在 props 中传递给 Menu.js，然后再传递给 MenuItem.js？文档提供了示例，但这些示例似乎假设您将所有代码塞进一个文件而不是跨多个组件。

我设置正确了吗？

Answer 1

当使用来自 react-navigation 的 Navigator 时，只有您声明为 Screens 的组件继承导航 Prop (在您的情况下为 Home and Roads)

这意味着您需要像您所说的那样将它作为 Prop 传递给它的 child :

<Menu navigation={this.props.navigation} />
<MenuItem navigation={this.props.navigation} />

如果有人想知道如何从不在 Navigator 中的组件导航，那么我建议阅读 react-navigation 文档的这一部分

https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html