我该如何解决这个错误 undefined is not an object(evalating'navigation.Navigate')？

Question

我是 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%",
  },
});

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

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;

Answer 1

navigation.navigate('Login')

而不是

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>