如何让React Native Expo启动页（SplashScreen）全屏覆盖无留白？

以下是几个针对性的解决步骤，按顺序尝试即可：

1. 正确配置Expo启动屏（Splash Screen） #

如果问题是Expo自带的启动屏出现留白，需在app.json或app.config.js中调整启动屏参数：

{
  "expo": {
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "cover", // 关键：使用cover模式填满屏幕，避免contain模式导致的留白
      "backgroundColor": "#你的启动图背景色" // 设置与启动图一致的背景色，消除过渡间隙
    }
  }
}

可以用Expo CLI命令生成适配各设备的启动图：npx expo splash:generate，工具会自动处理不同分辨率的适配需求。

2. 确保OnboardingScreen组件本身全屏 #

打开src/OnboardingScreen.js，给根容器添加全屏样式：

import { StyleSheet, View } from 'react-native';

const OnboardingScreen = () => {
  return (
    <View style={styles.container}>
      {/* 你的引导页内容 */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    height: '100%',
    margin: 0,
    padding: 0,
    backgroundColor: '#页面背景色', // 设置与内容匹配的背景色，避免局部留白
  },
});

export default OnboardingScreen;

如果使用了ScrollView等容器，同样要给它们设置flex:1和宽高100%。

3. 调整导航容器与栈的样式 #

在App.js中给NavigationContainer和Stack导航添加全屏样式：

// 修改NavigationContainer
<NavigationContainer style={{ flex: 1, width: '100%', height: '100%' }}>
  <Stack.Navigator
    initialRouteName="OnboardingScreen"
    screenOptions={{
      headerShown: false,
      contentStyle: {
        flex: 1,
        width: '100%',
        padding: 0,
        margin: 0,
      },
    }}
  >
    {/* 路由配置 */}
  </Stack.Navigator>
</NavigationContainer>

4. 处理异形屏安全区域适配 #

如果是刘海屏、挖孔屏导致的留白，可通过react-native-safe-area-context让内容延伸到安全区域外：
首先安装依赖：npx expo install react-native-safe-area-context
然后在OnboardingScreen中修改：

import { SafeAreaView, StyleSheet } from 'react-native';

const OnboardingScreen = () => {
  return (
    <SafeAreaView style={styles.container} edges={['top', 'bottom', 'left', 'right']}>
      {/* 页面内容 */}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
});

edges属性设置为所有方向，强制内容覆盖整个屏幕范围。

5. 禁用系统缩放影响布局 #

部分安卓设备的显示缩放设置会导致布局偏移，可在App.js中添加以下代码禁用：

import { Text, PixelRatio } from 'react-native';

// 禁止字体缩放影响布局
Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;

// 锁定像素比，避免缩放干扰
PixelRatio.setPixelRatio(PixelRatio.get());

内容的提问来源于stack exchange，提问作者Gilmeri Golano