Reactjs 如何修复此错误？未定义的对象不是对象（正在评估'；导航'；）？

我对react native很陌生，在一个项目上工作我已经完成了项目的所有屏幕，但是当我想导航到另一个屏幕时，我在单击按钮而不是切换屏幕时遇到了这个错误。 这是我的app.js代码

import { StatusBar } from "expo-status-bar";
import React from "react";
import Cardlist from "./components/MainMenu";

export default function App() {
  return <Cardlist />;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor: 'red',
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
  },
});

从“世博会状态栏”导入{StatusBar}；
从“React”导入React；
从“/components/MainMenu”导入卡片列表；
导出默认函数App（）{
返回；
}
const styles=StyleSheet.create({
容器：{
弹性：1，
//背景颜色：“红色”，
对齐项目：“中心”，
辩护内容：“中心”，
宽度：“100%”，
},
});

这是我的按钮屏幕，我在屏幕底部创建了两个按钮，当我按下按钮时，我得到了错误

import React from "react";
import { View, Text, FlatList, Dimensions, Image } from "react-native";
import { Button } from "react-native-elements";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import CardView from "../CardView";
import LoginScreen from "../Login/login";
import ApplyLoan from "../MainPage/ApplyLoan";
import styles from "./styles";
import imgs from "./imgs";

function BtnScreen({ navigation }) {
  return (
    <View style={styles.btncontainer}>
      <Button
        buttonStyle={styles.loginButton}
        title="Login"
        onPress={() => navigation.Navigate("Login")}
      />

      <Button
        buttonStyle={styles.loginButton}
        title="Apply Now"
        onPress={() => navigation.Navigate("Applynow")}
      ></Button>
    </View>
  );
}

const AuthStack = createStackNavigator();
const Cardlist = (props) => {
  return (
    <View style={styles.button}>
      <View style={styles.container}>
        <Image
          style={styles.logo}
          source={require("../../assets/images/123.jpeg")}
        />
      </View>
      <FlatList
        style={styles.flat}
        data={imgs}
        renderItem={({ item }) => <CardView card={item} />}
        showsVerticalScrollIndicator={false}
        snapToAlignment={"start"}
        decelerationRate={"fast"}
        snapToInterval={Dimensions.get("window").height}
      />

      <BtnScreen />

      <NavigationContainer>
        <AuthStack.Navigator>
          <AuthStack.Screen name="Login" component={LoginScreen} />
          <AuthStack.Screen name="Applynow" component={ApplyLoan} />
        </AuthStack.Navigator>
      </NavigationContainer>
    </View>
  );
};
export default Cardlist;

从“React”导入React；
从“react native”导入{视图、文本、平面列表、维度、图像}；
从“react native elements”导入{Button}；
从“@react-navigation/native”导入{NavigationContainer}”；
从“@react navigation/stack”导入{createStackNavigator}；
从“./CardView”导入CardView；
从“./Login/Login”导入登录筛选；
从“./MainPage/ApplyLoan”导入ApplyLoan；
从“/styles”导入样式；
从“/imgs”导入imgs；
函数BtnScreen（{navigation}）{
返回(
导航。导航（“登录”）}
/>
navigation.Navigate（“Applynow”）}
>
);
}
const AuthStack=createStackNavigator（）；
const Cardlist=（道具）=>{
返回(
}
showsVerticalScrollIndicator={false}
snapToAlignment={“开始”}
减速率={“快”}
snapToInterval={Dimensions.get（“窗口”）.height}
/>
);
};
导出默认卡片列表；

而不是

navigation.Navigate('Login')

修改导航器，使BtnScreen位于AuthStack内

 <AuthStack.Navigator initialRouteName="ButtonScreen">
       <AuthStack.Screen name="Login" component={LoginScreen} />
       <AuthStack.Screen name="Applynow" component={ApplyLoan} />
       <AuthStack.Screen name="ButtonScreen" component={BtnScreen} />
       <AuthStack.Screen name="CardList" component={CardList} />
     </AuthStack.Navigator>

已尝试，但仍然出现相同的错误这是因为您的BtnScreen不在AuthStack.Navigator内。只能在LoginScreen和ApplyLoan组件中使用navigation.navigate。请参阅更新的答案以向您展示示例。您可以根据自己的需要重新排列屏幕

 <AuthStack.Navigator initialRouteName="ButtonScreen">
       <AuthStack.Screen name="Login" component={LoginScreen} />
       <AuthStack.Screen name="Applynow" component={ApplyLoan} />
       <AuthStack.Screen name="ButtonScreen" component={BtnScreen} />
       <AuthStack.Screen name="CardList" component={CardList} />
     </AuthStack.Navigator>