Question

TypeError：navigation.navigate 不是一个函数

2020-10-10

4250

typescript react-native react-navigation-stack tsx

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

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

navigation.navigate('HomeScreen')

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

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

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

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

但是您得到的似乎是一个运行时错误，因为您希望组件的参数是一个包含 prop“navigation”的 props 对象，但您编写它时整个 props 对象被称为“navigation”。这就是 @realard 在他们的关于对象解构的回答中谈论的内容。

在纯 JS 中，它将是：

const RegistrationScreen = ({navigation}) =>

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

以内联方式声明 props 对象的定义

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

为 props 声明类型或接口

interface RegistrationProps {
     navigation: Navigation;
}

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

Answer 2

您需要对 RegistrationScreen 函数进行对象解构。您可以使用以下附加功能从 props 访问导航：

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