如何实现Expo web端index.html样式的自动化自定义配置

方案1：使用自定义HTML构建模板（最推荐） #

从根源避免Expo覆盖你的样式配置：

• 从当前web目录复制一份正常可用的index.html到项目根目录，重命名为web-index-template.html，把你需要的react-native-web推荐样式写死在这个模板的<style>标签中
• 打开项目根目录的app.json（或app.config.js），在expo.web配置项下新增模板配置：

{
  "expo": {
    "web": {
      "template": "./web-index-template.html"
    }
  }
}

• 后续执行expo build:web时，Expo会直接使用你提供的模板生成最终的index.html，不会自动覆盖你配置的样式。

方案2：添加构建后自动替换脚本 #

如果不想修改模板配置，可以通过钩子脚本自动修改构建产物：

• 在项目根目录新建patch-web-style.js文件，写入以下代码：

const fs = require('fs');
const path = require('path');

const indexPath = path.join(__dirname, 'web', 'index.html');
const htmlContent = fs.readFileSync(indexPath, 'utf8');
// 替换默认样式为react-native-web推荐样式
const patchedContent = htmlContent.replace(
  /<style>[\s\S]*?<\/style>/,
  `<style>
    html, body { height: 100%; }
    body { overflow: hidden; }
    #root { display:flex; height:100%; }
  </style>`
);
fs.writeFileSync(indexPath, patchedContent, 'utf8');
console.log('index.html样式已自动修复');

• 打开package.json，修改build:web命令：

{
  "scripts": {
    "build:web": "expo build:web && node patch-web-style.js"
  }
}

• 后续执行npm run build:web就会在构建完成后自动替换样式，无需手动修改。

方案3：全局CSS注入样式 #

不需要修改HTML文件，直接在代码层面注入全局样式：

• 新建global-web.css文件，写入你需要的样式代码：

html, body { height: 100%; }
body { overflow: hidden; }
#root { display:flex; height:100%; }

• 在Web端入口文件（通常是index.web.js或App.js顶部）导入这个CSS文件：

import './global-web.css';

• 该样式优先级高于HTML内联的默认样式，构建后会自动生效，若出现被覆盖的情况，可在每条属性后添加!important提升优先级。

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