React Native+Expo应用在iPhone13上下出现白边问题求助

问题原因 #

你当前的代码给Login页面的根View设置了paddingTop: insets.top，这会把根View向下推，导致顶部安全区（刘海区域）显示父容器的白色背景；底部同理，根View被向上推，底部安全区出现白边。

修复步骤 #

1. 修改Login.tsx #

让根View占满整个屏幕（包括安全区外），用内部容器处理安全区适配：

import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Text, View } from 'react-native';

function Login() {
  const insets = useSafeAreaInsets();

  return (
    {/* 根View占满整个屏幕，背景色延伸到安全区外 */}
    <View style={{ flex: 1, backgroundColor: 'green' }}>
      {/* 内部容器用padding避开安全区，内容显示在安全区内 */}
      <View
        style={{
          flex: 1,
          justifyContent: 'space-between',
          alignItems: 'center',
          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>
    </View>
  );
}

export default Login;

2. 可选：改用SafeAreaView简化代码 #

也可以直接从react-native-safe-area-context导入SafeAreaView，替代内部的padding处理，代码更简洁：

import { SafeAreaView } from 'react-native-safe-area-context';
import { Text, View } from 'react-native';

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

export default Login;

3. 优化index.tsx结构 #

确保SafeAreaProvider包裹整个导航结构，无需额外flex:1样式（它仅提供上下文，内部NavigationContainer会自动占满屏幕）：

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>
      <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;

原理说明 #

• 根View设置flex:1和背景色，确保颜色覆盖整个屏幕（包括安全区的刘海、底部小黑条区域）。
• 内部容器（或SafeAreaView）负责将内容限制在安全区内，避免被系统控件遮挡。

内容的提问来源于stack exchange，提问作者fagner nunes