Question

TypeError：未定义不是一个对象（评估'navigation.navigate'）React Native

2021-08-24

921

javascript react-native react-navigation

当我按下按钮时，我需要导航到我的主屏幕。但我收到错误=> TypeError：未定义不是对象（评估“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

问题是因为当您按下按钮时，您说要调用 CANCEL BUTTONPRESS ，没有参数，如下所示

891311279

您定义 cancelbuttonpress ，它是一个期望参数的函数，如下所示

226712358

因为当您调用 cance> castion> cancelbuttonpress 没有传递参数，导航是 undefined ，这就是为什么 navigation.navigate.navigate 抛出该错误。

解决方案 ：

实际上，当您按下 CANCER buttonpress 时，您不应传递参数称呼。相反，您应该更新 cancelbuttonpress

218036306

假设您已经设置了 react> react-navigation 正确

正确，应该通过 this.props.navigation 而不是

访问它

Answer 2

看来您没有为该函数提供任何参数（因此 navigation 的值确实是 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 事件，因为您实际上不需要为函数提供任何参数来获得预期的行为。