React Native Expo如何检测暗模式是否开启？自定义Hook返回false如何解决

• Expo 项目默认未开启跟随系统明暗模式的配置，iOS 端默认强制使用浅色模式，因此Appearance.getColorScheme()始终返回light，导致你的钩子返回false
• 你当前封装的钩子仅在组件首次渲染时静态取一次值，没有监听系统配色变化，即使后续切换系统主题也无法更新返回值
• 注意：该 API 仅支持 iOS 13 及以上系统，你使用的 iOS 14 满足版本要求，不存在版本兼容性问题

1. 首先修改 Expo 配置文件（app.json或app.config.js），开启跟随系统配色的权限：

{
  "expo": {
    "userInterfaceStyle": "automatic",
    "ios": {
      "infoPlist": {
        "UIUserInterfaceStyle": "Automatic"
      }
    }
  }
}

顶层userInterfaceStyle设为automatic表示应用全局跟随系统配色，iOS 端infoPlist中的配置是向系统声明应用支持自动切换明暗模式。

2. 优化自定义 Hook，支持动态监听系统配色变化，推荐直接使用 React Native 内置封装好的useColorScheme钩子：

import { useColorScheme } from 'react-native';

export default function useIsDarkModeEnabled() {
  const colorScheme = useColorScheme();
  return colorScheme === 'dark';
}

3. 配置修改后需要重新编译原生项目，不能仅刷新 JS bundle，执行expo run:ios重新构建安装应用后配置即可生效。

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