0

我在使用 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>;
}

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

我怎样才能解决这个问题？

4

2 回答 2

0

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

“注意：使用 Chrome 进行调试时，getColorScheme() 将始终返回光。”

如果使用，这也适用于 useColorScheme() 钩子。

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

于 2021-10-17T02:44:01.077 回答
0

问题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>;
}
于 2021-04-10T03:47:03.890 回答