我怎样才能在 react-native 中获得正确的 ColorScheme？

Question

我在使用 Expo CLI 创建的新 react-native 应用程序中使用自定义挂钩通过 tailwindcss 支持暗模式。具有暗模式逻辑的 TailwindProvider 如下所示：

const TailwindProvider: React.FC = ({ children }) => {
  const [currentColorScheme, setcurrentColorScheme] = useState(Appearance.getColorScheme());
  console.log("CurrentColorScheme:", currentColorScheme);
  const isDarkMode = currentColorScheme == "dark";
  const tw = (classes: string) => tailwind(handleThemeClasses(classes, isDarkMode))
  return <TailwindContext.Provider value={{ currentColorScheme, setcurrentColorScheme, tw, isDarkMode }}>{children}</TailwindContext.Provider>;
}

如您所见，我使用 react-native 中的 Appearance.getColorScheme() 方法来获取当前的 ColorScheme。但是在 iOS 和 Android 上，在调试和生产模式下，我总是得到 light 而不是 dark。

我该如何解决这个问题？

Answer 1

useState(Appearance.getColorScheme()) 的问题是它只会在应用程序加载时检查一次。您可以尝试使用 useColorScheme() 挂钩来保持最新状态：

// ...
import { useColorScheme } from 'react-native';

const TailwindProvider: React.FC = ({ children }) => {
  const currentColorScheme = useColorScheme();
  console.log({ currentColorScheme });
  const isDarkMode = currentColorScheme === "dark";
  const tw = (classes: string) => tailwind(handleThemeClasses(classes, isDarkMode));
  return <TailwindContext.Provider value={{ currentColorScheme, tw, isDarkMode }}>{children}</TailwindContext.Provider>;
}

Answer 2

据说 'light' 在调试和生产代码中都被 return 编辑了。但是，仅 returning 'light' 的一个可能原因是使用了 Chrome 调试。根据文档页面：[https://reactnative.dev/docs/appearance][1]

"注意：使用 Chrome 进行调试时，getColorScheme() 将始终 return 点亮。"

这也适用于 useColorScheme() 挂钩（如果使用）。

此外，如果 App.json，IOS 和 Android 的 userInterfaceStyle 都应设置为自动。

我怎样才能在 react-native 中获得正确的 ColorScheme？

How can i get the right ColorScheme in react-native?

react-native

expo

darkmode