导航到 react-native 屏幕未定义的道具导航答案

【问题标题】：Navigate to a react-native screen undefined prop navigation导航到 react-native 屏幕未定义的道具导航
【发布时间】：2018-12-31 17:27:05
【问题描述】：

我正在开发一个 react-native 应用程序，目前可以使用底部的选项卡访问两个屏幕。我想导航到 onPress 上的特定屏幕，并尝试触发从一个屏幕到下一个屏幕的导航。

为此，看起来我需要将一个道具传递给屏幕并按如下方式访问它：

const {navigate} = this.props.navigation;

然后做：

onPress={() => navigate('Result', {result: results[i]})}

虽然，这会产生一个错误，指出未定义 navigation 属性。我不清楚这个道具应该来自哪里/如何将它传递到屏幕上。理想情况下，我希望每个屏幕都可以访问导航堆栈。我一直很难让它工作，并感谢任何关于如何做到这一点的建议。

相关导航代码：

AppNavigator.js

import React from 'react';
import { createSwitchNavigator } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';

    export default createSwitchNavigator({
      // You could add another route here for authentication.
      // Read more at https://reactnavigation.org/docs/en/auth-flow.html
      Main: MainTabNavigator,
    });

【问题讨论】：

navigation 属性被传递给导航器中的屏幕组件（在您的情况下为选项卡导航器）。可以贴一下导航器的代码吗？
@NULLSWEΔT，查看已编辑，我已添加代码。
导航道具将自动传递给使用react-navigation的方法的任何和所有组件，例如：createStackNavigator()、createBottomTabNavigator等。你能在你尝试的地方显示代码吗访问this.props.navigation？如果你想将它传递给不使用 createStackNavigator() 的组件，那么你需要像往常一样将它传递给组件属性：<SomeComponent navigate={this.props.navigation.navigate} />。

标签： reactjs react-native react-navigation expo

【解决方案1】：

您可以使用withNavigation HOC 将navigation 属性传递给组件。

示例代码：

import React from 'react';
import { withNavigation } from 'react-navigation';

class YourComponent extends React.Component {
  render() {
    const {navigate} = this.props.navigation;
    return <Button onPress={() => navigate('Result', {result: results[i]})} />;
  }
}

export default withNavigation(YourComponent);

来源：https://reactnavigation.org/docs/en/with-navigation.html

【讨论】：

感谢您的帮助。这似乎解决了undefined 错误，尽管它没有导航到“结果”选项卡/没有收到任何错误。