使用ReactJS能否修改iPhone端Safari浏览器的顶部颜色？

你提到的iPhone X及后续机型可自定义的顶部区域，在ReactJS对应的web运行环境（Safari、App内嵌webview）里属于状态栏+顶部安全区范畴，不需要依赖React Native类的原生能力，直接通过web标准API即可实现，具体步骤如下：

• 第一步：开启安全区渲染权限
  首先在项目入口的index.html里修改viewport元标签，添加viewport-fit=cover配置，允许web内容延伸到刘海、状态栏所在的区域，否则所有安全区相关配置都不会生效：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  

• 第二步：自定义web内容层的顶部区域配色
  iOS 11及以上版本的web环境支持通过CSS环境变量获取顶部安全区的实际高度，你可以在全局布局里加一个固定在顶部的容器，设置你需要的背景色，同时自动适配不同机型的刘海高度：

  .top-safe-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    /* 替换为你需要的顶部区域配色 */
    background-color: #2563eb;
    /* 兼容旧版iOS的安全区高度写法 */
    height: constant(safe-area-inset-top);
    height: env(safe-area-inset-top);
  }
  

  把这个容器放在React应用根组件的最外层即可，它会自动撑满顶部的刘海区域，显示你设置的配色。
• 第三步：修改系统级状态栏配色（可选）
  如果你需要修改的是屏幕最顶部显示时间、信号的系统状态栏配色，而不是web内容的顶部区域，再加两个元标签配置即可：

  <!-- 配置Safari状态栏的显示模式，black-translucent模式下会透传web内容的顶部背景 -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <!-- iOS 15+ 支持直接设置状态栏背景色，替换为你需要的色值即可 -->
  <meta name="theme-color" content="#2563eb">
  

注意事项 #

• 如果你的React应用运行在第三方App的内嵌webview中，部分App会强制接管系统状态栏的样式，这种情况下web端配置可能不生效，需要对应App的原生端开放webview修改状态栏的权限。
• 上述CSS写法自带降级逻辑，非刘海屏、安卓设备上safe-area-inset-top值为0，不会出现多余的顶部留白。

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