如何在React Native Expo iOS应用中修改启动屏状态栏颜色？

当然可以修改，不过启动屏是应用启动时原生层面展示的内容，此时React还未初始化，没法用useIsFocused这类React钩子或StatusBar组件动态控制，只能通过Expo的配置文件静态设置，具体步骤如下：

1. 通过app.json/app.config.js配置启动屏状态栏 #

在项目配置文件中，找到expo.ios节点，添加statusBar配置项，设置状态栏文字样式（light对应浅色文字，dark对应深色文字）；如果需要，还可以设置状态栏背景色以匹配启动屏背景，避免过渡闪烁：

{
  "expo": {
    "ios": {
      "statusBar": {
        "style": "light", // 可选值："light" | "dark"
        "backgroundColor": "#121212" // 建议和启动屏背景色保持一致
      }
    },
    // 其他配置...
  }
}

2. 处理启动屏与首屏的状态栏过渡（可选） #

如果首屏状态栏样式和启动屏不一致，直接切换可能会出现闪烁。可以用expo-splash-screen API控制启动屏的隐藏时机，等首屏准备好后再切换状态栏样式：

import { useState, useEffect } from 'react';
import { StatusBar } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';

// 阻止启动屏自动隐藏
SplashScreen.preventAutoHideAsync();

export default function App() {
  const [isAppReady, setIsAppReady] = useState(false);

  useEffect(() => {
    async function prepareApp() {
      // 这里添加应用初始化逻辑，比如加载资源、初始化状态等
      await new Promise(resolve => setTimeout(resolve, 1500));
      
      setIsAppReady(true);
      // 隐藏启动屏
      await SplashScreen.hideAsync();
      // 切换到首屏需要的状态栏样式
      StatusBar.setBarStyle('dark-content');
    }

    prepareApp();
  }, []);

  if (!isAppReady) {
    return null; // 或自定义加载占位组件
  }

  return (
    <>
      <StatusBar style="dark" />
      {/* 你的应用内容 */}
    </>
  );
}

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