React Native 导航堆栈不起作用

Question

我对反应本机导航有疑问。 x 一切看起来都进展顺利。我没有看到任何有问题的终端。我还删除了这段代码

<Stack.Navigator>
      <Stack.Screen name="Login" component={LoginScreen} />
  </Stack.Navigator>

，并将这段代码添加到

<Text>test message</Text>

我的程序中。 你可以看到

但是我添加了堆栈导航代码，我看到了空白页面。你能看到这张图片

我该如何解决这个问题？

App.js 的完整代码

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View} from 'react-native';
import Navigation from './views/navigation';
import ErrorScreen from './views/ErrorScreen/ErrorScreen';

export default function App() {
  return (
    <View style={styles.container}>
      <Stack.Navigator>
          <Stack.Screen name="Login" component={LoginScreen} />
      </Stack.Navigator>      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

LoginScreen.js 的完整代码

import { View, Text, Image, StyleSheet, useWindowDimensions, KeyboardAvoidingView} from 'react-native';
import React, {useState} from 'react'
import Logo from '../../assets/fdslogo.png';
import CustomInput from '../components/CustomInput/CustomInput';
import CustomButton from '../components/CustomButton/CustomButton';
import { useNavigation } from "@react-navigation/native";

const LoginScreen = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const {height} = useWindowDimensions();

  return (
    <KeyboardAvoidingView behavior='padding'>
    <View style={styles.root}>
     <Image 
        source={Logo}
        resizeMode="contain"
        style={styles.logo}
         />

<CustomInput placeholder="E-Posta Adresinizi Giriniz"
        value={email}
        setValue={setEmail}/> 
      <CustomInput placeholder="Şifrenizi Giriniz"
        value={password}
        setValue={setPassword}
        secureTextEntry/>


    <CustomButton  text="Giriş Yap" />
    </View>
    </KeyboardAvoidingView>
  )
}

const styles = StyleSheet.create({
  root: {
      alignItems: 'center',
      paddingTop: 0,
  },

  logo: {
     
      maxWidth: 300,
      maxHeight: 200,
  },


});

export default LoginScreen;