react-native：无法读取未定义的属性“导航”

Posted 2023-03-15

【中文标题】react-native：无法读取未定义的属性“导航”

【英文标题】：react-native : Cannot read property 'navigate' of undefined

【发布时间】：2017-08-31 10:03:08

【问题描述】：

我创建了一个组件 (MyGlobalComponent)，其中包含一个 ActionButton 和一个 tabNavigator，其中包含一个 stackNavigator。 我在我的应用组件中使用了这个组件。

我想通过按下 ActionButton 上的按钮导航到 TabNavigator 的屏幕，但出现此错误：

Cannot read property 'navigate' of undefined

在这一行：

goToCamera = () => this.props.navigation.navigate("NewObs"); ;

这是我的代码：

import React,  Component  from "react";
import  AppRegistry, Text, View, Image, Alert, Platform  from "react-native";
import  StackNavigator, TabNavigator  from "react-navigation";

import Photo from "./Photo";
import NouvelleObservation from "./NouvelleObservation";
import Optionpage from "./Optionpage";

import SettingPage from "./page/Setting";
import LoginPage from "./page/Login";

import styles from "./css/styles";



import ActionButton from "react-native-action-button";
import Icon from "react-native-vector-icons/Ionicons";
import Toolbar from "react-native-toolbar";


const MyTabView = TabNavigator(
  Photo:  screen: Photo ,
  NewObs:  screen: NouvelleObservation ,
  Options: 
    screen: StackNavigator(
      setting:  screen: SettingPage ,
      login:  screen: LoginPage 
    )
  
);

class MyGlobalComponent extends Component 
  constructor(props) 
    super(props);
  

  goToCamera = () => 
    this.props.navigation.navigate("NewObs");
  ;

  render() 
    return (
      <View style= flex: 1 >
        <MyTabView />

        <ActionButton
          buttonColor="rgba(231,76,60,1)"
          offsetY=offsetYValue
          offsetX=10
        >
          <ActionButton.Item
            buttonColor="#1abc9c"
            title="Go to new obs"
            onPress=() => 
              this.goToCamera();
            
          >
            <Icon name="md-camera" style=styles.actionButtonIcon />
          </ActionButton.Item>
        </ActionButton>
      </View>
    );
  


MyGlobalComponent.router = MyTabView.router;

export default class App extends React.Component 
  constructor(props) 
    super(props);
  

  render() 
    return (
        <View style=styles.maincontainer>
          <MyGlobalComponent />
        </View>
    );
  

我尝试在每个构造函数中记录props，但我看不到导航。

请问如何解决？

【问题讨论】：

您只会在导航器中获得导航道具，例如 Tab，StackNavigator。` 它需要在导航器或链接到 redux 的导航助手中才能访问 navigation prop.

在以下版本pastebin.com/RmCcVXMS 中它可以工作，但我不知道为什么。

【参考方案1】：

我面临同样的问题。我解决了。试试这个方法。 我在子组件中添加以下行。

import  withNavigation  from 'react-navigation';

和

export default withNavigation(ChildComponent_Name);

您可以找到更多详情https://reactnavigation.org/docs/en/navigation-prop.html