TypeError：navigation.navigate不是函数

问题描述

import React from 'react';
import {Button,View,Text} from 'react-native';

const RegistrationScreen = (navigation: any) => {
  return (
    <View>
      <Text>My Registration Page</Text>
      <Button
        title="Go Back"
        onPress={() => navigation.navigate('HomeScreen')}></Button>
    </View>
  );
};

export default RegistrationScreen;

当我使用.tsx作为文件扩展名时，出现错误。例如：- RegistrationScreen.tsx ，然后出现错误 // TypeError：navigation.navigate不是函数。 （在“ navigation.navigate（'HomeScreen'）'中，'navigation.navigate'未定义） //

解决方法

您将需要为函数RegistrationScreen进行对象分解。您可以通过该附加项从道具访问导航：

string json = File.ReadAllText("alert.json");

,

navigation: any说，变量导航可以是任何东西。它可以是数字，对象，未定义等。

navigation.navigate('HomeScreen')

然后，您尝试访问变量navigate上的属性navigation，此外，您假定该属性是一个带有字符串参数的函数。

打字稿应该告诉您“等等，我不知道我能做到！”

您应该能够从react-navigation包中导入用于导航的类型定义。如果不是这样，对于这种特殊用法就足够了：

interface Navigation {
     navigate(destination: string): void;
}

但是您得到的似乎是运行时错误，因为您的意思是使组件的参数成为包含prop“导航”的props对象，但是您已经编写了它，以便调用整个props对象“导航”。这就是@realard在回答对象销毁问题时所谈论的内容。

在普通JS中，它将是：

const RegistrationScreen = ({navigation}) =>

但是对于打字稿，我们需要声明Navigation属性必须为Navigation类型。您可以通过以下两种方式之一进行操作：

声明内联道具对象的定义

const RegistrationScreen = ({navigation}: {navigation: Navigation}) =>

声明道具的类型或接口

interface RegistrationProps {
     navigation: Navigation;
}

const RegistrationScreen = ({navigation}: RegistrationProps) =>