React Native Web修改app.json后背景色未生效问题求助

问题原因 #

Expo的app.json中web.backgroundColor配置仅作用于Web端的启动页（Splash Screen）和页面元数据，不会自动设置应用运行后的全局页面背景色。这就是为什么Android端生效（Android的backgroundColor是应用全局背景），但Web端没变化的核心原因。

解决方案 #

推荐优先使用方法一，保持三端代码统一：

方法一：通过React Native根容器设置全局背景

修改App.js，给最外层添加占满屏幕的根容器，并设置背景色：

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';
import StartGameScreen from './screens/StartGameScreen';

export default function App() {
  return (
    <View style={styles.rootContainer}>
      <StartGameScreen/>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  rootContainer: {
    flex: 1,
    backgroundColor: '#14206b', // 和app.json配置一致的全局背景色
  }
});

• flex:1确保根容器占满整个屏幕空间
• 该配置同时作用于Web、Android、iOS三端，完全匹配你“共用相同代码与UI”的需求

方法二：Web端单独添加CSS（可选，用于差异化场景）

如果需要给Web端单独定制样式，先通过expo customize:web生成web/index.html文件，然后在<head>里添加全局样式：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 原有HTML内容 -->
    <style>
      body, html {
        margin: 0;
        padding: 0;
        background-color: #14206b;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>

这种方法直接控制Web页面的底层DOM元素背景，适合需要和Native端做样式区分的场景。

补充说明 #

你当前StartGameScreen中inputContainer的backgroundColor:#72063c仅作用于该容器本身，不会影响全局背景，无需修改。

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