React Native中如何结合useState与useMemo实现主题样式随状态更新

核心问题排查 #

你的代码存在两个导致样式不更新的明显错误：

• 调色板的键名是light/dark字符串，但你直接把布尔类型的darkMode作为键名取值，实际访问的是palette[index]['true']/palette[index]['false']，不存在对应属性，永远返回undefined
• 调用Theme返回的值本身就是颜色值，你后续取bg.background属于多余操作，进一步导致取值异常

修复方案 + useMemo实现 #

第一步：修正Theme函数逻辑 #

const Theme = (index, darkMode) => {
  const palette = {
    background: {
      light: '#ffffff', // 替换为你的浅色背景色
      dark: '#121212' // 替换为你的深色背景色
    },
    custom: {
      light: '#f5f5f5',
      dark: '#1e1e1e'
    }
  }
  // 根据布尔值映射到对应的键名，再取值
  return palette[index][darkMode ? 'dark' : 'light'];
}

第二步：在组件中用useMemo包裹计算逻辑 #

import { useState, useMemo } from 'react';

function YourComponent() {
  const [darkMode, setDarkMode] = useState(false);
  // 仅当darkMode变化时，重新计算主题色
  const bgColor = useMemo(() => Theme("background", darkMode), [darkMode]);

  return (
    <div style={{ backgroundColor: bgColor }}>
      {/* 切换主题按钮 */}
      <button onClick={() => setDarkMode(prev => !prev)}>
        切换深色/浅色模式
      </button>
    </div>
  )
}

逻辑说明 #

useMemo接收两个参数：第一个是执行计算的回调函数，第二个是依赖项数组。当数组内的任意依赖项发生变化时，会重新执行回调函数返回最新的计算结果，其余情况会直接返回缓存的结果避免重复计算。这里把darkMode加入依赖数组后，每次切换主题状态都会自动更新颜色值，同步触发组件样式更新。

内容的提问来源于stack exchange，提问作者Conquest Onyekachi Idam