全局主颜色设置未生效求助：StyleSheet中颜色不更新

你遇到的问题其实是 React Native 里 StyleSheet.create() 的特性导致的——StyleSheet 是在模块被导入时就一次性创建完成的静态对象，不会随着后续变量的改变自动更新。

具体到你的代码：

• 当 Avatar 组件的模块被导入时，StyleSheet.create() 就已经执行了，这时候你的 initialize({ primaryColor: 'yellow' }) 还没运行，S.COLOR.PRIMARY 还是默认的 red，所以 styles.avatarContainer.backgroundColor 被固定成了 red。
• 后面你调用 setColorOptions 修改了 COLOR.PRIMARY 的值，但是已经创建好的 styles 对象不会重新计算，所以还是保持原来的 red。
• 而内联样式是在组件每次渲染时才会计算，所以能拿到最新的 COLOR.PRIMARY 值（也就是 yellow）。

如果你希望样式定义在 StyleSheet 里同时能跟随全局颜色更新，有几种可行的方式：

方式1：用 useMemo 动态生成样式 #

在组件内部使用 useMemo，把全局颜色作为依赖，这样每次颜色变化时都会重新生成样式：

import React, { useEffect, useMemo } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { connect } from 'react-redux';
import * as S from '../assets/style/style.constants';

export const Avatar = props => {
  // 动态生成样式，依赖 S.COLOR.PRIMARY
  const styles = useMemo(() => StyleSheet.create({
    avatarContainer: { backgroundColor: S.COLOR.PRIMARY },
  }), [S.COLOR.PRIMARY]);

  useEffect(() => { console.log(S.COLOR.PRIMARY); }, []);
  
  return (
    <View>
      <TouchableOpacity style={styles.avatarContainer}>
        <Text>OP </Text>
      </TouchableOpacity>
    </View>
  );
};

const mapStateToProps = state => ({ user: state.user.user, });
export const AvatarComponent = connect(mapStateToProps, {})(Avatar);

方式2：用 React Context 管理全局主题 #

如果你的项目里多处需要用到全局主题颜色，更推荐用 Context 来统一管理，这样所有依赖主题的组件都能自动响应变化：

第一步：创建主题 Context #

// src/ThemeContext.js
import React, { createContext, useState, useContext } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children, initialPrimaryColor = 'red' }) => {
  const [primaryColor, setPrimaryColor] = useState(initialPrimaryColor);

  const updatePrimaryColor = (color) => {
    setPrimaryColor(color || initialPrimaryColor);
  };

  return (
    <ThemeContext.Provider value={{ primaryColor, updatePrimaryColor }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

第二步：在入口处初始化主题 #

// index.js
import { ThemeProvider } from './src/ThemeContext';
import { registerScreens, goToLogin } from './src/navigation';

registerScreens(screens);

export const initialize = config => {
  const { primaryColor = 'red' } = config;
  
  Navigation.events().registerAppLaunchedListener(() => {
    // 这里把 ThemeProvider 作为根组件包裹整个应用
    Navigation.setRoot({
      root: {
        component: {
          name: 'Login',
          options: { topBar: { visible: false } },
          passProps: { initialPrimaryColor: primaryColor }
        }
      }
    });
  });
};

initialize({ primaryColor: 'yellow' });

第三步：在Avatar组件中使用主题 #

import React, { useMemo } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { connect } from 'react-redux';
import { useTheme } from '../ThemeContext';

export const Avatar = props => {
  const { primaryColor } = useTheme();
  
  const styles = useMemo(() => StyleSheet.create({
    avatarContainer: { backgroundColor: primaryColor },
  }), [primaryColor]);
  
  return (
    <View>
      <TouchableOpacity style={styles.avatarContainer}>
        <Text>OP </Text>
      </TouchableOpacity>
    </View>
  );
};

const mapStateToProps = state => ({ user: state.user.user, });
export const AvatarComponent = connect(mapStateToProps, {})(Avatar);

这种方式的优势在于，后续如果需要修改主题颜色，只需要调用 updatePrimaryColor，所有依赖主题的组件都会自动更新样式，非常适合全局主题管理。

方式3：把样式定义成函数（简单但性能略差） #

如果不想用Context或useMemo，也可以把styles改成一个函数，每次渲染时调用生成新的样式对象：

const getStyles = (primaryColor) => StyleSheet.create({
  avatarContainer: { backgroundColor: primaryColor },
});

export const Avatar = props => {
  const styles = getStyles(S.COLOR.PRIMARY);
  
  // ...其他代码
};

不过这种方式每次渲染都会重新创建StyleSheet，性能上不如useMemo，适合小型组件或者颜色变化不频繁的场景。

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