Question

导航至 React-native 屏幕未定义的 prop 导航

2018-12-31

1141

reactjs react-native react-navigation expo

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

为此，我似乎需要将一个 prop 传递给屏幕并按如下方式访问它：

const {navigate} = this.props.navigation;

然后执行：

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

但是，这会生成一个错误，提示 navigation prop 未定义。我不清楚这个 prop 应该来自哪里/如何将其传递给屏幕。理想情况下，我希望每个屏幕都可以访问导航堆栈。我一直很难让它工作，并感谢任何关于如何做到这一点的建议。

相关导航器代码：

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,
    });

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