如何修改Firebase Hosting的index.html以正常显示React Native项目内容？

问题根因 #

执行firebase init时，Firebase会自动在你指定的托管根目录生成默认的欢迎页index.html，如果未替换为项目打包后的静态资源直接部署，就会出现你看到的默认欢迎页。

index.js的作用说明 #

你本地的index.js是React Native Web项目的源代码入口，和该需求直接相关：它不会直接作为托管文件使用，但打包工具会将它和你项目的其他代码编译打包后，注入到最终生成的index.html中，无需你手动修改该文件。

具体解决步骤 #

• 第一步：打包项目生成静态Web资源
  如果你使用Expo管理React Native项目，执行打包命令：
  npx expo export:web
  打包完成后所有静态资源会输出到项目根目录的web-build文件夹，里面包含你项目实际生效的index.html。
  如果你是原生React Native适配Web的项目，执行对应Web打包命令即可，通常为npm run build或yarn build，打包产物默认输出到build文件夹。
• 第二步：修改Firebase托管配置
  打开项目根目录下的firebase.json文件，将hosting配置下的public字段修改为你上一步的打包输出目录路径，示例配置如下：

  {
    "hosting": {
      "public": "web-build",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  }
  

  其中rewrites配置用于适配前端路由，避免页面刷新时出现404问题。
• 第三步：重新部署项目
  执行以下命令完成部署：
  1. （可选）清除之前的部署缓存，避免残留文件影响：firebase hosting:clear
  2. 执行部署命令：firebase deploy --only hosting

部署完成后刷新线上页面即可看到你的项目内容。

内容的提问来源于stack exchange，提问作者William O'Brien