TypeError: undefined is not an object (evaluating 'navigation.navigate') React Native

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时，它是一个需要参数的函数，如下所示

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

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

解决方案:

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

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

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

访问它

Answer 2

您似乎没有为该函数提供任何参数（因此导航的值确实是 undefined）。为什么不向 cancelButtonPress 函数提供事件 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 对象，其值不同于 undefined.

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

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

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

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

TypeError: undefined is not an object (evaluating 'navigation.navigate') React Native

TypeError: undefined is not an object (evaluating 'navigation.navigate') React Native

javascript

react-native

react-navigation