我在我的react native expo项目中使用React Native Paper Material Design库构建了一个登录屏幕，一切正常。然后我试图添加导航，现在初始屏幕是空白的。

// App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { PaperProvider } from 'react-native-paper';
import Navigation from './Navigation'; 


export default function App() {
  return (
    <PaperProvider>
    <View style={styles.container}>
      <Text style={styles.headerText}>Checker App</Text>
      
      <Navigation />
      
      
      <StatusBar style="auto" />
    </View>
    </PaperProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerText: {
    fontSize: 30, 
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#6a1299'
  },
});

x

// Navigation.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './components/LoginScreen'; 
import AnotherScreen from './components/AnotherScreen';

const Stack = createStackNavigator();

const Navigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="LoginScreen">
        <Stack.Screen name="LoginScreen" component={LoginScreen} />
        <Stack.Screen name="AnotherScreen" component={AnotherScreen} />
        {/* Define other screens here */}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Navigation;

// LoginScreen.js
import * as React from 'react';
import { TextInput, Button } from 'react-native-paper';
import { View, Text } from 'react-native';

const LoginScreen = ({navigation}) => {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [passwordVisible, setPasswordVisible] = React.useState(false);

  const togglePasswordVisibility = () => {
    setPasswordVisible(!passwordVisible);
  };


  return (
    <>
    <View>
    <TextInput
      label="Email"
      value={email}
      onChangeText={text => setEmail(text)}
      mode='outlined'
      style={{ width: 300, marginBottom: 6 }} 
    />
    <TextInput
      label="Password"
      value={password}
      onChangeText={text => setPassword(text)}
      mode="outlined"
      secureTextEntry={!passwordVisible}
      style={{ width: 300 }} 
      
    />
    <Button
        icon={passwordVisible ? "eye" : "eye-off"} // Toggle the eye icon based on passwordVisible state
        onPress={togglePasswordVisibility}
        style={{ position: 'absolute', top: 75, right: 0 }}
      />
    </View>
    <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 16 }}>
    <Button style={{ marginRight: 10, width: 130 }} icon="home" mode="contained" onPress={() => console.log('Login Pressed')}>
    Login
  </Button>
  <Button onPress={() => navigation.navigate('AnotherScreen')} style={{ width: 130 }} icon="account-plus" mode="outlined" >
    Sign up
  </Button>
    </View>
    </>
  );
};

export default LoginScreen;

// AnotherScreen.js
import React from 'react';
import { View, Text } from 'react-native';

const AnotherScreen = () => {
  return (
    <View>
      <Text>This is Another Screen</Text>
    </View>
  );
};

export default AnotherScreen;

的数据
实际上，初始屏幕并不是完全空白的。App.js页面的Text元素出现在页面的顶部，但它的位置与之前不同。它覆盖了我的Android手机顶部菜单的一部分。
我没有看到任何错误。
我尝试注解掉LoginScreen.js文件中的所有内容，并将其替换为一个简单的组件，它工作得很好（当然，在将其添加到App.js文件之后）。
我试着更新所有的版本，但最终我被告知几个小时的依赖性地狱，最终不得不将本地项目从GitHub存储库恢复到以前的版本。
我还尝试将App.js组件 Package 在导航容器中，因为这里的另一个类似问题似乎已经通过该方法解决了。我尝试移动导航容器以 Package 其他各个部分，但没有成功。