如何从不是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 />;
  }
}

我的主页包含一个菜单，其中包含一个MenuItem列表。我试图让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')。

我是否需要将导航器通过道具传递给Menu.js，然后传递给MenuItem.js？文档提供了示例，但似乎是假设您将所有代码都塞入一个文件而不是跨多个组件的示例。

我是否正确设置了它？

Answer 1

从反应导航中使用导航器时，只有您声明为屏幕的组件才会继承导航道具（在您的案例中为Home和Roads）

这意味着你需要将它作为道具传递给它的孩子，如你所说：

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

如果有人想知道如何从不在导航器内的组件导航，那么我建议阅读这部分反应导航文档

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