如何在React Native中从启动屏幕导航到登录屏幕？

Question

我是新来的本地人。我正在做一个React Native项目。启动应用程序时会出现一个初始屏幕。初始屏幕中有一个“继续”按钮。当我单击“继续”按钮时，它应该转到登录屏幕。但它显示此错误：

TypeError: cannot read property 'navigate' of undefined

我试图将代码从navigation.navigate（'login'）更改为this.props.navigation.navigate（'login'），然后它还会显示错误

TypeError: cannot read property 'navigation' of undefined

这是启动（欢迎）屏幕的代码：

import React, { FunctionComponent, useState } from "react"
import { observer } from "mobx-react-lite"
import { Dimensions, Image } from "react-native"
import { Screen, Button } from "components"
import Carousel, { Pagination } from 'react-native-snap-carousel';
import { Block } from "components/block/block"
const { width: ScreenWidth } = Dimensions.get('screen');
import { NavigationProp, NavigationState } from "@react-navigation/native";

export interface AuthScreensWelcomeScreenProps {
   navigation?: NavigationProp<Record<string, object>, string, NavigationState, {}, {}>
}

export const AuthScreensWelcomeScreen: FunctionComponent<AuthScreensWelcomeScreenProps> = observer((props) => {

const {
    navigation
} = props;
const [activeSlide, setActiveSlide ] = useState(0);

const items = [
{ image: require('../../../assets/splash1.jpg') },
{ image: require('../../../assets/splash2.jpg') },
{ image: require('../../../assets/splash3.jpg') }
];

function renderItem ( { item, index } ) {
return (
    <Image style={{ alignSelf: 'center', flex: 1, resizeMode: 'contain', width: ScreenWidth / 1.25 }} source={item.image}></Image>
)
}

return (
<Screen preset="fixed">
    <Block flex>
        <Carousel
            sliderWidth={ScreenWidth}
            itemWidth={ScreenWidth}
            data={ items }
            layout="default"
            renderItem={ renderItem }
            onSnapToItem={ index => { setActiveSlide( index ) } }/>
        <Block>
            <Pagination 
                activeDotIndex={activeSlide}
                dotsLength={items.length} 
                dotStyle={{
                    width: 10,
                    height: 10
                }}/>
        </Block>
    </Block>
    <Block row my={20} space="evenly" px={20}>
        <Button title="Continue" containerStyle={{ flex: 1 }} onPress={ ( ) => navigation.navigate('login') }/>
    </Block>
</Screen>
)
})

这是auth-navigator.tsx文件：

import React, { FunctionComponent } from "react";
import { createNativeStackNavigator } from "react-native-screens/native-stack";
import { observer } from "mobx-react-lite";
import { AuthScreensLoginScreen } from "screens/auth-screens/login-screen";
import { AuthScreensRegisterScreen } from "screens/auth-screens/register-screen";
import { AuthScreensForgotPasswordScreen } from "screens/auth-screens/forgotpassword-screen";
import { AuthScreensWelcomeScreen } from 'screens/auth-screens/welcome-screen'; 

const { Navigator, Screen } = createNativeStackNavigator<{
register: undefined,
login: undefined,
forgotpassword: undefined,
welcome: undefined
}>();

export const AuthStack: FunctionComponent = observer( ( props ) => {

return (
<Navigator
    initialRouteName="register"
    screenOptions={{
        headerShown: false,
        gestureEnabled: true,
        stackPresentation: "push",
        contentStyle: {
            backgroundColor: 'white'
        }
    }}>
    <Screen 
        name="register" 
        component={AuthScreensRegisterScreen} />
    <Screen 
        name="login" 
        component={AuthScreensLoginScreen} />
    <Screen 
        name="forgotpassword" 
        component={AuthScreensForgotPasswordScreen} />
    <Screen 
        name="welcome" 
        component={AuthScreensWelcomeScreen} />
</Navigator>
);

} );

感谢您的帮助。