React Native中如何实现背景铺满全屏且状态栏、底部区域颜色统一

你需要实现的效果参考：
#

现有样式仅覆盖了普通内容区域，未适配系统保留的状态栏、底部安全边距区域，且系统状态栏默认独立配置样式，调整方案如下：

1. 调整页面组件结构 #

采用「外层背景容器+状态栏配置+内层内容安全区」的层级结构，代码示例：

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

export default function YourPage() {
  // 替换为你的实际背景色
  const bgColor = '#165DFF';
  return (
    <View style={[styles.fullScreenBg, {backgroundColor: bgColor}]}>
      {/* 同步状态栏颜色与背景一致 */}
      <StatusBar
        backgroundColor={bgColor}
        barStyle="light-content" // 背景色深时用light-content，背景色浅时用dark-content
        translucent={false}
      />
      <SafeAreaView style={styles.contentContainer}>
        {/* 此处放置你的页面原有业务内容 */}
      </SafeAreaView>
    </View>
  )
}

2. 替换原有样式代码 #

const styles = StyleSheet.create({
  fullScreenBg: {
    flex: 1,
    width: '100%',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
  }
});

export default styles;

补充适配说明 #

• 若需要安卓端底部虚拟导航栏颜色和背景保持一致，可导入NavigationBar组件调用NavigationBar.setBackgroundColor(bgColor)配置，仅安卓端生效
• 不要直接将SafeAreaView作为最外层容器，否则其自带的上下安全边距会导致背景无法覆盖状态栏和底部安全区域
• Expo项目可使用expo-status-bar替代原生StatusBar组件，配置逻辑完全一致

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