React Native如何在组件外使用useTheme Hook获取主题值

由于StyleSheet.create是静态创建的，无法直接在组件外的文件中访问Context内的主题状态，你可以通过以下两种方式实现需求：

方法一：将样式定义为接收theme的函数 #

修改SomeComponent.styles.js，把样式写成函数形式，让它接收theme作为参数：

export default (theme) => StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: theme.primary,
    borderRadius: px(16),
    borderWidth: px(2),
    paddingHorizontal: px(10),
    borderColor: theme.buttonBorder,
    height: height,
  },
});

然后在对应组件SomeComponent.js中，通过useTheme获取主题后调用这个样式函数：

import { useTheme } from './ThemeContext';
import getStyles from './SomeComponent.styles';

const SomeComponent = () => {
  const { theme } = useTheme();
  const styles = getStyles(theme);

  return (
    <View style={styles.container}>
      {/* 组件内容 */}
    </View>
  );
};

方法二：组件内定义动态样式（适合简单场景） #

如果样式逻辑不复杂，也可以直接在组件内部创建依赖主题的样式，省去单独的styles文件：

import { useTheme } from './ThemeContext';

const SomeComponent = () => {
  const { theme } = useTheme();
  const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: theme.primary,
      borderRadius: px(16),
      borderWidth: px(2),
      paddingHorizontal: px(10),
      borderColor: theme.buttonBorder,
      height: height,
    },
  });

  return (
    <View style={styles.container}>
      {/* 组件内容 */}
    </View>
  );
};

额外提醒 #

• 若需要全局复用主题样式逻辑，可以封装一个useThemedStyles钩子，整合useTheme与样式函数的调用逻辑
• 不要尝试在组件外部直接读取Context或MMKV中的主题值，这种方式只能获取初始值，无法跟随主题切换实时更新

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