使用状态/上下文动态更改 React Native 中的配置 colors.js

Question

我的 RN 项目中有一个简单的 Colors 文件，如下所示：

export default {
    color: '#2e66f5',
    dark1: '#232a3a',
    dark2: '#141c2b',
    white1: '#fff',
    white2: '#fff',
    aqua: '#3ecac1',
    green: '#d5d841', 
    yellow: '#f3c51e',
    red: '#ff3235'
}

在我的应用程序中到处都在使用它。

我要做的就是使用上下文/状态来动态更改颜色、dark1、dark2 等使用状态的道具。问题是我通常会导入 useContext 并做

const {activeColor} = useContext(AppContext)

export default {
    color: activeColor,
    //etc
}

并在应用程序的任何位置设置 activeColor 状态。但是由于 Colors.js 不是一个反应组件，我不能在这个文件中使用上下文/状态。

Answer 1

React 页面展示了如何使用 useContext React Hook 的一个很好的示例： https://reactjs.org/docs/hooks-reference.html#usecontext

ContextHolder.ts

const colors = {
  ....
}
function updateContext(attr)
{
  colors: attr,
}
const contextToUse = {
  colors: colors,
  updateContext: updateContext,
}
export default contextToUse;

文件 2：

import contextToUse from "../ContextHolder.ts";
const context = createContext(contextToUse);

然后调用updateContext

context.updateContext({dark1: "#3A3A3A"});