属性在使用 TypeScript 的 React Native 中类型 'object' 上不存在

Question

我是 React Native 和 TypeScript 的新手，如果问题很简单，请原谅我。

在我的应用程序中，我有一个屏幕，我正在使用该屏幕进行导航 React-Navigation 我还通过导航传递回调函数。

navigation.navigate('BluredSuccess', {blurredSuccessCallback})

我显示 BlurredScreen 2 秒，然后使用 navigation.pop 关闭并调用回调函数，如下所示：

import { NavigationScreenProp } from 'react-navigation';
import { Route } from '@react-navigation/native';

interface Props {
    navigation?: NavigationScreenProp,
    route: Route<any>
}

const LoginOtpSuccess : React.FC<Props> = ({navigation, route: {params}}) => {

    React.useEffect(() => { setTimeout(() => {
                
        navigation.pop()
        params.blurredSuccessCallback() // here I see an error.

    }, 2000) })

    return (
        <View style={styles.container}>
            <BlurView
                style={styles.absolute}
                blurType="light"
                blurAmount={40}
                reducedTransparencyFallbackColor="white"
            />
            <Image source={require('../../../assets/otp_success.png')} style={{width:90, height:90}}></Image>
        </View>
    )
}

现在代码可以正常工作了，但我一直在我的回调方法中看到一个错误：

Property 'blurredSuccessCallback' does not exist on type 'object'.

我在 params 变量上也看到 Object is possibly 'undefined'.。

我该如何解决这个错误？在我的 Props 界面中 navigation 和 route 的正确类型应该是什么我不认为使用任何是正确的方法。

Answer 1

这样试试

interface Props {
    navigation?: NavigationScreenProp
    route?: {
      params?: {
        blurredSuccessCallback?(): void
      }
     }
}

Answer 2

您需要正确注释您的属性，route 和 navigation。通常，任何使用 ? 指示符包含可选字段的类型都可能是未定义的，您需要在使用这些字段的任何地方考虑到这一点。

在此处输入道具的一种常见方式：

import { RouteProp } from '@react-navigation/native';
import { NavigationScreenProp } from 'react-navigation';

// Your stack here, or import this to fit your needs
type RootParamList = {
  Home: undefined;
  BlurredSuccess: { blurredSuccessCallback: () => void };
};

type BlurredSuccessRouteProp = RouteProp<RootParamList, 'BlurredSuccess'>;
type BlurredSuccessNavigationProp = NavigationScreenProp<RootParamList, 'BlurredSuccess'>;

type Props = {
  navigation: BlurredSuccessNavigationProp,
  route: BlurredSuccessRouteProp;
};

const LoginOtpSuccess = ({ route, navigation }: Props) => {
    const { blurredSuccessCallback } = route.params;
    React.useEffect(() => { setTimeout(() => {
        navigation.pop();
        blurredSuccessCallback();
    }, 2000) })

    return (
        // ...
    )
}

有关更多示例，请参阅 the documentation。

属性在使用 TypeScript 的 React Native 中类型 'object' 上不存在

Property doesn't exist on type 'object' in React Native with TypeScript

typescript

react-native

react-native-navigation

属性 在使用 TypeScript 的 React Native 中类型 'object' 上不存在

Property doesn't exist on type 'object' in React Native with TypeScript

typescript

react-native

react-native-navigation

属性在使用 TypeScript 的 React Native 中类型 'object' 上不存在