React Native中如何创建可跨屏使用的条件式颜色常量？

我用React Native Expo开发应用，原本有个存储Colors常量的文件，现在要添加用户选色功能，需要根据条件切换配色方案。本来想用Context API把配色值传到这个独立的常量文件，以此确定用户的配色板，但Colors不是组件，没法使用Context的值。能不能按这个思路实现？现在这个常量已经在很多屏幕组件里用了，改写工作量太大。

我试过用SecureStore、AsyncStore传递条件值，都没成功。

用户尝试的代码：

import { AuthContext } from "../store/auth-context";
import { useContext, useEffect} from "react";

const purplePalette = {
primary50: "#e4d9fd",
primary100: "#c6affc",
primary200: "#a281f0",
primary400: "#5721d4",
primary500: "#3e04c3",
primary700: "#2d0689",
primary800: "#200364",
accent500: "#f7bc0c",
error50: "#fcc4e4",
error500: "#9b095c",

gray300: "#dadae3",
gray400: "#5d5b62",
gray500: "#39324a",
gray700: "#221c30",
green400: "#2d9710",
red400: "#683333",
red300: "#a10707",
yellow400: "#7f6e01",
yellow300: "#bbcd1c",

cyan400: "#47a6a7d6",
orange100: "#f3ded4",
orange200: "#e1af94",
orange300: "#fc9c73",
orange400: "#c06c14d6",
orange500: "#9a5710d6",
orange800: "#432302d6",
};

const orangePalette = {
primary50: "#f2ece9",
primary100: "#f3ded4",
primary200: "#fc9c73",
primary400: "#c06c14d6",
primary500: "#9a5710d6",
primary700: "#76430cd6",
primary800: "#432302d6",
accent500: "#f7bc0c",
error50: "#fcc4e4",
error500: "#9b095c",

gray300: "#dadae3",
gray400: "#5d5b62",
gray500: "#39324a",
gray700: "#221c30",
green400: "#2d9710",
red400: "#683333",
red300: "#a10707",
yellow400: "#7f6e01",
yellow300: "#bbcd1c",

cyan400: "#47a6a7d6",
orange100: "#f3ded4",
orange200: "#e1af94",
orange300: "#fc9c73",
orange400: "#c06c14d6",
orange500: "#9a5710d6",
orange800: "#432302d6",
};

let Colors;

function getColors() {
const authCtx = useContext(AuthContext);
useEffect(() => {
function dummy() {
switch (authCtx.colorPalette) {
case "default":
return Colors = orangePalette;
case "orange":
return Colors = orangePalette;
case "purple":
return Colors = purplePalette;
      }
    }
dummy();
[]);
}

getColors();

export default Colors;

可行解决方案：用自定义Hook替代直接导出常量 #

不用直接导出Colors常量，改成导出一个自定义Hook，既能访问Context获取用户选择的配色，又能最小化现有组件的修改量。

步骤1：修改Colors文件 #

import { AuthContext } from "../store/auth-context";
import { useContext } from "react";

// 保留原有配色板定义
const purplePalette = {
  primary50: "#e4d9fd",
  primary100: "#c6affc",
  primary200: "#a281f0",
  primary400: "#5721d4",
  primary500: "#3e04c3",
  primary700: "#2d0689",
  primary800: "#200364",
  accent500: "#f7bc0c",
  error50: "#fcc4e4",
  error500: "#9b095c",

  gray300: "#dadae3",
  gray400: "#5d5b62",
  gray500: "#39324a",
  gray700: "#221c30",
  green400: "#2d9710",
  red400: "#683333",
  red300: "#a10707",
  yellow400: "#7f6e01",
  yellow300: "#bbcd1c",

  cyan400: "#47a6a7d6",
  orange100: "#f3ded4",
  orange200: "#e1af94",
  orange300: "#fc9c73",
  orange400: "#c06c14d6",
  orange500: "#9a5710d6",
  orange800: "#432302d6",
};

const orangePalette = {
  primary50: "#f2ece9",
  primary100: "#f3ded4",
  primary200: "#fc9c73",
  primary400: "#c06c14d6",
  primary500: "#9a5710d6",
  primary700: "#76430cd6",
  primary800: "#432302d6",
  accent500: "#f7bc0c",
  error50: "#fcc4e4",
  error500: "#9b095c",

  gray300: "#dadae3",
  gray400: "#5d5b62",
  gray500: "#39324a",
  gray700: "#221c30",
  green400: "#2d9710",
  red400: "#683333",
  red300: "#a10707",
  yellow400: "#7f6e01",
  yellow300: "#bbcd1c",

  cyan400: "#47a6a7d6",
  orange100: "#f3ded4",
  orange200: "#e1af94",
  orange300: "#fc9c73",
  orange400: "#c06c14d6",
  orange500: "#9a5710d6",
  orange800: "#432302d6",
};

// 导出自定义Hook，在组件中调用获取当前配色
export function useColors() {
  const authCtx = useContext(AuthContext);
  
  switch (authCtx.colorPalette) {
    case "default":
    case "orange":
      return orangePalette;
    case "purple":
      return purplePalette;
    default:
      return orangePalette; // 默认 fallback
  }
}

// 可选：保留原有导出兼容旧代码（逐步迁移时用）
export default function LegacyColors() {
  console.warn("直接导入Colors已废弃，请使用useColors Hook");
  return orangePalette;
}

步骤2：修改现有组件的使用方式 #

原来的组件如果是import Colors from './Colors'，现在改成在组件内部用Hook获取：

import { useColors } from './Colors';

function MyScreen() {
  const Colors = useColors();
  
  // 原有代码完全不用改，比如Colors.primary50这样的调用逻辑保持不变
  return (
    <View style={{ backgroundColor: Colors.primary50 }}>
      <Text style={{ color: Colors.primary500 }}>示例文本</Text>
    </View>
  );
}

这个方案的优势：

• 几乎不用修改原有组件的配色使用逻辑，只改获取Colors的方式
• 自动响应Context中colorPalette的变化，用户切换配色时组件会实时更新
• 保留了原有配色板的结构，无需重构常量

妥协方案：全局监听Context更新Colors（不推荐，仅临时兼容） #

如果实在不想修改任何组件，可以用全局变量结合Context监听的方式，但要注意：这种方式下组件不会自动响应Colors变化，除非组件本身有其他状态更新。

修改Colors文件 #

import { AuthContext } from "../store/auth-context";
import { useEffect, useContext } from "react";

// 保留原有配色板
const purplePalette = { /* ... */ };
const orangePalette = { /* ... */ };

// 全局变量存储当前配色
let Colors = orangePalette;

// 导出一个监听器组件，在根组件中挂载
export function ColorChangeListener() {
  const authCtx = useContext(AuthContext);
  
  useEffect(() => {
    switch (authCtx.colorPalette) {
      case "default":
      case "orange":
        Colors = orangePalette;
        break;
      case "purple":
        Colors = purplePalette;
        break;
      default:
        Colors = orangePalette;
    }
  }, [authCtx.colorPalette]);
  
  return null;
}

export default Colors;

在根组件中添加监听器 #

import { ColorChangeListener } from './Colors';

export default function App() {
  return (
    <AuthContext.Provider value={/* 你的Context值 */}>
      <ColorChangeListener />
      {/* 其他页面组件 */}
    </AuthContext.Provider>
  );
}

这种方式只能临时过渡，因为组件不会自动重新渲染，建议优先用自定义Hook方案。

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