TypeError: undefined is not an object (evaluating 'navigation.navigate') 反应本机

Question

我需要在按下按钮时导航至主屏幕。 但是我得到一个错误 => 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时，它是一个 function ，它需要一个参数，如下所示

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

因为当您在不传递参数的情况下调用cancelButtonPress时， navigation是undefined ，这就是navigation.navigate向您抛出该错误的原因。

解决方案：

实际上你不应该在按下cancelButtonPress时传递参数，因为navigation不是你应该通过 function 调用传递的东西。 相反，您应该更新您的cancelButtonPress function 如下

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

假设你已经正确设置了react-navigation ，它应该可以通过this.props.navigation访问

Answer 2

您似乎没有为 function 提供任何参数（因此 navigation 的值确实是undefined ）。 为什么不向cancelButtonPress function 提供事件e并尝试console.log navigation的值？

你最终会得到类似的东西：

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

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

（当涉及到功能时）。

这样的事情会让你有一个navigation object 值不同于undefined 。

如果您不想让自己过于复杂，您应该重构您的cancelButtonPress ，以使其正确实现navigation.navigate 。

你最终会得到这样的结果：

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

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