如何在非React组件的colors.js中访问Redux的userCode适配配色

问题描述 #

我用React Native + Redux开发应用，现有静态配色文件colors.js：

const Colors = {
   mainColorDark: '#E34b3d',
   mainColor: '#e3596d',
   mainColorLight: '#F0965C',
}

export default Colors;

需要根据Redux全局store中userCode（值为'0'或'1'）切换配色：userCode='0'用原配色，userCode='1'用新配色。直接修改所有组件的样式引用要改数十个文件，希望避免这种情况。

当前组件直接导入Colors使用样式：

import Colors from '../../../Utilities/Colors/Colors';
export default Styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.mainBackgroud,
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  NBRcompText: {
    fontSize: hp('3%'),
    fontWeight: 'bold',
    color: Colors.maiColors,
  },
  // ...其他样式
});

在React组件中通过useSelector获取userCode：

import { useSelector } from 'react-redux';

export const TransItem = ({ TransItem, selectItem, goToScanScreen }) => {
  const whichUser = useSelector(state => state.userType.userCode)
  // ...组件逻辑
  return (
    <View style={[Styles.ringContainer, { backgroundColor: color }]}>
      // ...组件内容
    </View>
  )
}

解决方案 #

非React组件无法直接访问Redux store，但可以通过以下几种改动量极小的方式实现动态配色：

方案1：函数式配色 + 自定义Hook #

此方案仅需修改colors.js和组件的导入方式，无需改动样式定义。

1. 修改colors.js，定义双配色并导出匹配函数

// 基础配色（userCode='0'）
const BaseColors = {
  mainColorDark: '#E34b3d',
  mainColor: '#e3596d',
  mainColorLight: '#F0965C',
};

// 用户类型1配色（userCode='1'）
const UserType1Colors = {
  mainColorDark: '#2D3748',
  mainColor: '#4A5568',
  mainColorLight: '#718096',
};

// 根据userCode返回对应配色对象
export const getColors = (userCode) => {
  return userCode === '1' ? UserType1Colors : BaseColors;
};

2. 创建自定义Hook useColors.js

import { useSelector } from 'react-redux';
import { getColors } from './colors';

export const useColors = () => {
  const userCode = useSelector(state => state.userType.userCode);
  return getColors(userCode);
};

3. 替换组件中的引用方式
   移除原Colors导入，改用Hook获取当前配色：

// 移除 import Colors from '../../../Utilities/Colors/Colors';
import { useColors } from '../../../Utilities/Colors/useColors';

export const TransItem = ({ TransItem, selectItem, goToScanScreen }) => {
  const Colors = useColors(); // 获取当前用户对应的动态配色
  const whichUser = useSelector(state => state.userType.userCode)

  return (
    <View style={[Styles.ringContainer, { backgroundColor: Colors.mainColor }]}>
      // ...组件内容
    </View>
  )
}

注意：若样式是StyleSheet.create静态创建的，其中的颜色值不会动态更新，需将动态颜色改为内联样式，或在组件内根据当前Colors动态生成样式。

方案2：Redux store管理配色状态 #

将配色存入Redux store，userCode变化时自动更新全局配色：

1. 添加配色相关的Action和Reducer

// actions.js
export const UPDATE_COLORS = 'UPDATE_COLORS';
export const updateColors = (colors) => ({
  type: UPDATE_COLORS,
  payload: colors,
});

// reducer.js
import { getColors } from './colors';
import { UPDATE_COLORS } from './actions';

// 默认使用userCode='0'的配色
const initialState = getColors('0');

export const colorsReducer = (state = initialState, action) => {
  switch(action.type) {
    case UPDATE_COLORS:
      return action.payload;
    default:
      return state;
  }
};

2. 同步userCode与配色更新
   在userType的Reducer中，当userCode变化时触发配色更新：

import { updateColors } from './actions';
import { getColors } from './colors';

const userTypeReducer = (state, action) => {
  switch(action.type) {
    case 'SET_USER_CODE':
      const newState = { ...state, userCode: action.payload };
      // 触发配色更新
      store.dispatch(updateColors(getColors(action.payload)));
      return newState;
    default:
      return state;
  }
};

3. 组件中从store获取配色

import { useSelector } from 'react-redux';

export const TransItem = ({ TransItem, selectItem, goToScanScreen }) => {
  const Colors = useSelector(state => state.colors); // 从store获取当前配色
  // ...组件逻辑
}

方案3：React Context提供全局配色 #

无需扩展Redux逻辑，用Context统一管理动态配色：

1. 创建ColorContext

// ColorContext.js
import { createContext, useContext, useSelector } from 'react';
import { getColors } from './colors';

const ColorContext = createContext();

export const ColorProvider = ({ children }) => {
  const userCode = useSelector(state => state.userType.userCode);
  const currentColors = getColors(userCode);

  return (
    <ColorContext.Provider value={currentColors}>
      {children}
    </ColorContext.Provider>
  )
};

export const useColors = () => useContext(ColorContext);

2. 根组件包裹ColorProvider

// App.js
import { ColorProvider } from './Utilities/Colors/ColorContext';
import { Provider } from 'react-redux';
import store from './store';

export default function App() {
  return (
    <Provider store={store}>
      <ColorProvider>
        {/* 应用组件 */}
      </ColorProvider>
    </Provider>
  )
}

3. 组件中使用useColors Hook
   同方案1，替换原Colors导入为const Colors = useColors()即可。

总结 #

追求最小改动量优先选方案1或方案3：仅需修改colors.js、新增一个Hook，再替换组件中的导入方式，样式定义可完全保留（静态StyleSheet中的动态颜色需改为内联样式）。

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