导航到反应原生屏幕未定义的道具导航

Question

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

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

const {navigate} = this.props.navigation;

然后做：

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

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

相关导航器代码：

应用导航器.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,
    });

Answer 1

您可以使用

withNavigation HOC 将navigation prop 传递到组件中。

示例代码：

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