TypeError: navigation.navigate is not a function

Question

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'未定义) //

Answer 1

您的函数 RegistrationScreen 需要对象解构。您可以通过添加的道具访问导航：

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

Answer 2

navigation: any 表示变量 navigation 可以是任何东西。可以是数字、对象、未定义等

navigation.navigate('HomeScreen')

然后您尝试访问变量 navigation 上的属性 navigate 并且您还假设此属性是一个接受字符串参数的函数。

Typescript 应该告诉你“等等，我不知道我能做到这一点！”

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

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

但是你得到的看起来是一个运行时错误，因为你的意思是你的组件的参数是一个包含道具“导航”的道具对象，但你已经写了它以便整个道具对象简称“导航”。这就是@realard 在他们关于对象解构的回答中所谈论的内容。

在普通 JS 中它将是：

const RegistrationScreen = ({navigation}) =>

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

内联声明道具对象的定义

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

声明道具的类型或接口

interface RegistrationProps {
     navigation: Navigation;
}

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

TypeError: navigation.navigate is not a function

TypeError: navigation.navigate is not a function

typescript

react-native

react-navigation-stack

tsx