Question

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

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

const {navigate} = this.props.navigation;

然后执行：

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

尽管如此，这会生成一条错误消息，说明未定义navigation道具。我不清楚这个道具应该从哪里来/如何传递到屏幕上。理想情况下，Id希望每个屏幕都可以访问导航堆栈。我一直很难度过这段时间来工作，并感谢任何有关如何执行此操作的建议。

相关导航代码：

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属性传递到组件中。

示例代码：

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

导航到反应本机屏幕未定义的道具导航

1 个答案: