React Native - 使用 colorScheme 管理主题颜色的最佳方法是什么？

Question

在我的 React Native 项目中，我想使用 colorScheme 管理主题颜色以支持暗模式。这是我的实现：

颜色.ts：

import { useColorScheme } from "react-native";

export const useColors = () => {
  const colorScheme = useColorScheme();
  const colors = {
    light: {
      tabBar: {
        tabBarTintRegular: "#a3a3a3",
        tabBarTintActive: "#0e0e0e",
        tabBarBackground: "#fff"
      }
    },
    dark: {
      tabBar: {
        tabBarTintRegular: "#8d8d8d",
        tabBarTintActive: "#f2f2f2",
        tabBarBackground: "#080808"
      }
    },
  }
  if (colorScheme == "light") {
    return colors.light
  } else {
    return colors.dark
  }
};

应用程序/（选项卡）/_layout.tsx：

...
export default function TabsLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarShowLabel: false,
        tabBarActiveTintColor: Colors().tabBar.tabBarTintActive,
        tabBarInactiveTintColor: Colors().tabBar.tabBarTintRegular,
        tabBarStyle: {
          backgroundColor: Colors().tabBar.tabBarBackground,
        },
      }}
    >
    ...
    </Tabs>
  );
}

我应该如何修改这个？这是一个好的实施吗？

Answer 1

您的方法总体上是好的，但是您可以进行一些改进，以提高可读性、效率并遵守最佳实践。这里有一些建议：

避免多次调用 Colors():

在 TabsLayout 中，您多次调用 Colors()，这可能效率低下且冗余。最好调用一次并重用结果。 重构 useColors 以直接返回颜色：

无需调用函数，您可以直接导出颜色对象，使其更加明确和清晰。 使用 Hook 来使用颜色：

当前的 useColors 是一个好的开始，但最好将其作为一个钩子来正确利用 React 的钩子系统。