财产不存在'；类型'上不存在；对象'；在React Native中使用TypeScript

我对母语和打字脚本很陌生，所以请原谅我，如果这个问题很琐碎的话

在我的应用程序中，我使用

React-Navigation

导航到一个屏幕，我还通过导航传递回调函数

navigation.navigate（'BluredSuccess'，{BluredSuccessCallback}）

我显示模糊屏幕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>
    )
}

我还看到

对象可能是“未定义的”。

在params变量上

如何修复此错误？在我的

道具

界面中，正确的

导航

和

路线

应该是什么类型？我不认为使用任何类型都是正确的方法。

像这样试试

界面道具{
导航？：导航屏幕弹出窗口
路线？：{
参数？：{
blurredSuccessCallback？（）：无效
}
}
}

您需要正确注释您的属性、

路线

和

导航

。通常，使用

？

-指示符包含可选字段的任何类型都可能未定义，因此无论在何处使用这些字段，都需要考虑到这一点

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

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 (
        // ...
    )
}

从'@react-navigation/native'导入{RouteProp}；
从“react navigation”导入{NavigationScreenProp}；
//您可以将堆栈放在此处，也可以将其导入以满足您的需要
类型RootParamList={
家：未定义；
BlurredSuccess:{blurredSuccessCallback:（）=>void}；
};
输入BlurredSuccessRouteProp=RouteProp；
键入BlurredSuccessNavigationProp=NavigationScreenProp；
类型道具={
导航：BlurredSuccessNavigationProp，
路线：模糊成功路线；
};
const loginotpsucess=（{route，navigation}:Props）=>{
const{blurredSuccessCallback}=route.params；
React.useffect（（）=>{setTimeout（（）=>{
navigation.pop（）；
blurredSuccessCallback（）；
}, 2000) })
返回(
// ...
)
}

有关更多示例，请参见

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 (
        // ...
    )
}