React Native - 我的应用程序在底部和顶部有一个白色间隙

Question

我的屏幕底部和顶部有白色间隙。

Iphone 13

我正在使用

expo

和

react-navigation

。

我已经尝试过

SafeAreaView

，

SafeAreaProvider

等。对可能发生的事情有什么想法吗？ 此时我的登录屏幕看起来像左侧的图像，我希望它看起来像右侧的图像。

index.tsx

    import * as React from 'react';
    import { createNativeStackNavigator } from '@react-navigation/native-stack';
    import LoginOrRegister from './screens/LoginOrRegister';
    import Login from './screens/Login';
    import 'react-native-screens';
    import { SafeAreaProvider} from 'react-native-safe-area-context';
    import { NavigationContainer } from '@react-navigation/native';
    
    
    function index() {
      const Stack = createNativeStackNavigator();
     
      return (
       <SafeAreaProvider style={{flex:1}}>
        <NavigationContainer independent={true}>
          <Stack.Navigator initialRouteName="LoginOrRegister">
                
            <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
            <Stack.Screen name="LoginOrRegister" component={LoginOrRegister} options={{ headerShown: false }}/>
          </Stack.Navigator>
              
        </NavigationContainer>
        </SafeAreaProvider>
      
    
      );
    }
    export default index;

登录.tsx

    import {
        useSafeAreaInsets,
      } from 'react-native-safe-area-context';
    
    import { Text, View } from 'react-native';
      
      function Login() {
        const insets = useSafeAreaInsets();
      
        return (
          <View
            style={{
              flex: 1,
              justifyContent: 'space-between',
              alignItems: 'center',
              backgroundColor: 'green',
      
              // Paddings to handle safe area
              paddingTop: insets.top,
              paddingBottom: insets.bottom,
              paddingLeft: insets.left,
              paddingRight: insets.right,
            }}
          >
            <Text>This is top text.</Text>
            <Text>This is bottom text.</Text>
          </View>
        );
      }
    
      export default Login;

Answer 1

SafeAreaView

确保您的屏幕不会被任何移动设备传感器条等捕获。您想要的就是删除它

SafeAreaView

。

function index() {
      const Stack = createNativeStackNavigator();
     
      return (
        <NavigationContainer independent={true}>
          <Stack.Navigator initialRouteName="LoginOrRegister">
                
            <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
            <Stack.Screen name="LoginOrRegister" component={LoginOrRegister} options={{ headerShown: false }}/>
          </Stack.Navigator>
              
        </NavigationContainer>£
      
    
      );
    }

并删除屏幕中的动态插入填充：

function Login() {
        return (
          <View
            style={{
              flex: 1,
              justifyContent: 'space-between',
              alignItems: 'center',
              backgroundColor: 'green',
            }}
          >
            <Text>This is top text.</Text>
            <Text>This is bottom text.</Text>
          </View>
        );
      }

但这不是一个好的做法。一般来说，您需要使用

SafeAreaView

来确保您的内容不会被设备屏幕覆盖部分遮挡。