React-native-expo 堆栈导航器不显示初始屏幕

Question

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

// 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'
  },
});

// 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 组件包装在导航容器中，因为这里的另一个类似问题似乎已经通过该方法解决了。我尝试移动导航容器来包裹其他各个部分，但没有成功。

Answer 1

使用 SafeAreaView 和样式包裹 LoginScreen

flex: 1

:

import { SafeAreaView } from 'react-native';

...

return (
  <SafeAreaView style={{flex: 1}}>
    <View>
    <TextInput
      label="Email"
      value={email}
      onChangeText={text => setEmail(text)}
      mode='outlined'
      style={{ width: 300, marginBottom: 6 }} 
    />
    ...
    ...
    ...
  </SafeAreaView>
)