Javascript 在react native应用程序中呈现另一个屏幕

我在react本机应用程序的页面之间导航时遇到问题。当我尝试使用按钮时，我收到以下错误消息：TypeError:undefined不是一个对象（评估“_this.props.navigation”）。我已经使用许多js文件创建了我的应用程序，我想使用按钮在它们之间导航。我的App.js文件从初始化开始呈现到Welcome屏幕

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import RecipesList from "cakeapp/app/screens/RecipesList.js";
import { ImageBackground, StyleSheet, View, Text, Button, navigation } from "react-native";


function WelcomeScreen(props) {
    return (
        <NavigationContainer>
        <ImageBackground
        style={styles.background}
        source={require('cakeapp/app/assets/MainPage.png')}
        >
        <Text style={styles.text}>MyCakeRecipes</Text>
        <View style={styles.homeButton}>
       <Button
        title="Recipes"
        onPress={() => this.props.navigation.navigate('RecipesList')}
        />
        </View>
        </ImageBackground>
        </NavigationContainer>
    );
}

const styles = StyleSheet.create({
    background: {
        flex:1,
        justifyContent: "flex-end",
    },
    text: {
    fontSize: 30,
    fontWeight: "bold",
    color: "white",
    textAlign: "center",
    bottom: 500,
  },
    homeButton: {
        width: '100%',
        height: 40,
        backgroundColor: '#5f7f8a'
    }
})

export default WelcomeScreen;


import React from 'react';
import { Image, ScrollView, View, Text, } from 'react-native';

const imageDis = {
  width: 150,
  height: 150
  //flex:1,
  //justifyContent: "flex-end"

};

const Recipes = () => (
  <ScrollView style={{backgroundColor: '#5f7f8a'}}>
    <Text style={{ fontSize: 20 }}>Chocolate Cake</Text>
    <Image source={require('cakeapp/app/assets/Choc.png')} style={imageDis} />
    <Text style={{ fontSize: 20 }}>Chocolate cupcake</Text>
    <Image source={require('cakeapp/app/assets/ChocCu.png')} style={imageDis} />
    <Text style={{ fontSize: 20 }}>Lemon Cake</Text>
    <Image source={require('cakeapp/app/assets/Lemon.png')} style={imageDis} />
    <Text style={{ fontSize: 20 }}>Lemom meringue</Text>
    <Image source={require('cakeapp/app/assets/LemonM.png')} style={imageDis} />
    <Text style={{ fontSize: 20 }}>Chocolate Berry</Text>
    <Image source={require('cakeapp/app/assets/ChcoBerry.png')} style={imageDis} />
  </ScrollView>
);

export default Recipes

导入“反应本机手势处理程序”；
从“React”导入React；
从'@react-navigation/native'导入{NavigationContainer}；
从“cakeapp/app/screens/RecipesList.js”导入RecipesList；
从“react native”导入{ImageBackground、样式表、视图、文本、按钮、导航}；
功能屏幕（道具）{
返回(
粘虫
this.props.navigation.navigate（'RecipesList'）}
/>
);
}
const styles=StyleSheet.create({
背景：{
弹性：1，
辩护内容：“柔性端”，
},
正文：{
尺寸：30，
fontWeight：“粗体”，
颜色：“白色”，
textAlign：“居中”，
底数：500，
},
主页按钮：{
宽度：“100%”，
身高：40，
背景颜色：“#5f7f8a”
}
})
导出默认屏幕；
从“React”导入React；
从“react native”导入{Image，ScrollView，View，Text，}；
常数imageDis={
宽度：150，
身高：150
//弹性：1，
//辩护内容：“柔性端”
};
常量配方=（）=>(
巧克力蛋糕
巧克力蛋糕
柠檬蛋糕
柠檬蛋白酥皮
巧克力浆果
);
导出默认配方

据我所知，app.js文件中使用了来定义要导航到的屏幕。您必须将导航作为道具传递给组件。 您的app.js文件应该如下所示

const Stack=createStackNavigator（）；
常量应用=（）=>{
返回(
);
};