如何在本机反应中导航到另一个屏幕？

Question

我是原生反应的新手。我正在制作一个反应原生项目。应用程序启动时会出现welcome screen。 welcome screen 中有一个“继续”按钮。当我单击“继续”按钮时，它应该转到login screen。但它显示了这个错误：

TypeError: undefined is not an object (evaluating 'navigation.navigate')

我尝试将代码更改为 this.props.navigation.navigate('login') 然后它还显示错误 TypeError: undefined is not an object (evalating '_this.props')

这是welcome screen的代码：

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>
);

} );

Answer 1

请将此屏幕添加到堆栈导航器中，然后只有您可以从道具访问导航。希望对您有所帮助：

<Screen 
            name="welcomescreen" 
            component={AuthScreensWelcomeScreen} />