TypeError: undefined不是对象(求值'navigation.navigate')本机的

Question

我需要导航到我的主屏幕时，我按下一个按钮。但我得到Error =>TypeError: undefined is not an object (evaluating 'navigation.navigate')

我的代码

import React, { Component, useEffect  } from 'react'    
import { Card } from 'react-native-elements'         
import AsyncStorage from '@react-native-async-storage/async-storage';
import screenStyles from './ScreenStyles';
import HomeHeader from '../components/HomeHeader';
import TicketCardList from '../components/TicketCardList';
import DisableModal from '../components/disableModal';
import { Camera } from 'expo-camera';
import * as Permissions from 'expo-permissions';
import {API_URL, API_TOKEN, API_URL2} from "@env"
import ClearLocalStorage from '../config/clearLocalStorage';
export default class CreateTroubleT extends Component {
constructor(){
super();
}

cancelButtonPress =() => {
this.props.navigation.navigate('HomeBottomBar');
console.log("OK")
}

render() {
return (                            

<TouchableOpacity style={styles.cancelJBDesing} onPress={()=> this.cancelButtonPress()}>
</TouchableOpacity>  
)
}
}

当我按下取消按钮时，我得到错误。我是Native的新手，所以感谢任何建议

Answer 1

问题是因为当您按下按钮时，您说您想要调用cancelButtonPress而不带任何参数，如下所示

onPress={()=> this.cancelButtonPress()}

但是当您定义cancelButtonPress时，它是一个期望参数的函数，如下所示

cancelButtonPress (navigation) {
navigation.navigate('HomeBottomBar')
console.log("OK")
}

因为当您调用cancelButtonPress而不传递参数时，navigation是undefined，这就是为什么navigation.navigate向您抛出错误。

<<p>

解决方案/strong>:实际上你不应该在按下cancelButtonPress时传递参数，因为navigation不是你应该通过函数调用传递的东西。相反，您应该更新cancelButtonPress函数，如下所示

cancelButtonPress = () => {
this.props.navigation.navigate('HomeBottomBar');
console.log("ok");
}

假设您已经正确设置了react-navigation，它应该可以通过this.props.navigation而不是

访问

Answer 2

看来您没有为函数提供任何参数(因此导航的值确实是undefined)。为什么不提供一个事件e给cancelButtonPress函数，并尝试console.lognavigation的值?

你会得到这样的结果:

<TouchableOpacity style={styles.cancelJBDesing} onPress={e=> this.cancelButtonPress(e)}>(当涉及到您的JSX时)。

cancelButtonPress (navigation) {
console.log(navigation);
navigation.navigate('HomeBottomBar');
console.log("OK");
}

(当涉及到函数时)。

这样的事情将允许你有一个navigation对象的值不同于undefined。

如果你不想让自己过于复杂，你应该重构你的cancelButtonPress，以便它能正确地实现navigation.navigate。

你会得到这样的结果:

cancelButtonPress () {
console.log("OK");
this.props.navigation.navigate("/pathToHome");
}

在这种情况下，您不需要捕获e事件，因为您实际上不需要为函数提供任何参数来获得预期的行为。