React Native适配useTheme后，如何恢复样式管理的原有灵活性？

问题背景 #

在使用 react navigation 的 useTheme() 之前，我通过以下方式管理全局配色和样式：

export const themeStyles = {
  primaryColor: 'blue',
  secondaryColor: 'grey'
}

export const Common = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: themeStyles.secondaryColor
  }
})

这种方式的优势很直接：

• 全局样式和配色可直接在任意组件导入使用：

  <View style={Common.container}> </View>
  <Text style={{color: themeStyles.primaryColor}}> </Text>
  

• 组件专属样式能轻松复用全局配色：

  const CustomButton = ({ title, onPress}) => {
    return (
      <TouchableOpacity onPress={onPress} activeOpacity={0.5} style={styles.button}>
          <CustomText>{title} </CustomText>
      </TouchableOpacity>
    );
  };
  
  const styles= StyleSheet.create({
    button: {
      color: "green",
      backgroundColor: themeStyles.secondaryColor
    },
  });
  
  export default CustomButton;
  

唯一痛点是动态样式只能用内联写法，因为组件外部无法访问props：

<CustomText style={{color: onPress? "blue": "grey"}}>{title} </CustomText>

当前困境 #

引入 react navigation 的 useTheme() 后，我用了一个自定义钩子管理主题样式，但灵活性大幅下降：

自定义钩子代码：

import { useTheme } from '@react-navigation/native'
import { useMemo } from 'react'
import { StyleSheet } from 'react-native'

export default useThemedStyles = styles => props => {
  const theme = useTheme()

  return useMemo(() => {
    const css = typeof styles === 'function' ? styles(theme, props) : styles
    return StyleSheet.create(css)
  }, [props, theme])
}

现在的使用方式：

const CustomButton = ({ title, onPress}) => {
  const styles = useStyles();
  return (
   <View style={styles.container}> 
     <TouchableOpacity onPress={onPress} activeOpacity={0.5} style={styles.button}>
        <CustomText>{title} </CustomText>
     </TouchableOpacity>
   </View>
  );
};

const useStyles = useThemedStyles((theme, props) => ({
      button: {
        color: "green",
        backgroundColor: theme.secondaryColor
      },
    container: theme.container
}));

现在遇到的核心问题：

1. 无法直接在JSX中访问主题变量，全局样式必须在组件专属样式里重新定义才能用（比如示例中的container: theme.container）
2. 每个组件都必须声明useStyles()，不像之前直接导入就能用
3. 虽然解决了动态样式依赖props的问题，但失去了之前的灵活性，想找最小改动的适配方案
4. 不知道如何给组件外部的样式表传递props

解决方案 #

1. 最小改动恢复原有灵活性：全局工具+钩子结合 #

保留之前的全局样式导入逻辑，同时用钩子处理动态样式，不用完全替换原有方案：

先创建全局主题工具文件theme.js：

import { useTheme } from '@react-navigation/native';
import { useMemo } from 'react';
import { StyleSheet } from 'react-native';

// 全局通用样式生成钩子
export const useCommonStyles = () => {
  const theme = useTheme();
  return useMemo(() => StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: theme.colors.secondary
    },
    // 其他全局样式...
  }), [theme]);
};

// 全局配色快捷访问钩子
export const useThemeColors = () => {
  const theme = useTheme();
  return theme.colors;
};

// 支持传props的动态样式钩子
export const useDynamicStyles = (styleGenerator, props) => {
  const theme = useTheme();
  return useMemo(() => {
    return StyleSheet.create(styleGenerator(theme, props));
  }, [theme, props]);
};

2. 无需重定义直接用全局样式和颜色 #

• 全局样式：用useCommonStyles钩子在组件中直接获取，不用重复定义
• 全局配色：用useThemeColors钩子直接拿到主题色值，在JSX或组件样式中使用

示例：

import { useThemeColors, useCommonStyles } from './theme';

const CustomButton = ({ title, onPress}) => {
  const colors = useThemeColors();
  const commonStyles = useCommonStyles();
  
  // 组件专属样式直接复用全局配色
  const localStyles = StyleSheet.create({
    button: {
      color: "green",
      backgroundColor: colors.secondary
    },
  });

  return (
   <View style={commonStyles.container}> 
     <TouchableOpacity onPress={onPress} activeOpacity={0.5} style={localStyles.button}>
        <CustomText style={{color: onPress ? colors.primary : colors.grey}}>{title} </CustomText>
     </TouchableOpacity>
   </View>
  );
};

3. 避免每个组件声明useStyles() #

• 封装通用样式组件：把常用全局样式（比如container）封装成独立组件，内部直接处理主题逻辑

  // theme.js中封装Container组件
  export const Container = ({ children, style }) => {
    const commonStyles = useCommonStyles();
    return <View style={[commonStyles.container, style]}>{children}</View>;
  };
  

  之后在组件中直接用：

  <Container>
    {/* 组件内容 */}
  </Container>
  

• 对于不需要props的动态样式，提前在外部生成钩子，减少组件内重复代码

4. 给组件外部的样式表传递props #

用useDynamicStyles钩子把需要的props作为依赖传入，在样式生成函数中直接使用：

示例：

import { useDynamicStyles } from './theme';

const CustomButton = ({ title, onPress, isActive}) => {
  // 传递需要的props给样式生成函数
  const styles = useDynamicStyles((theme, props) => ({
    button: {
      backgroundColor: props.isActive ? theme.colors.primary : theme.colors.secondary,
      color: theme.colors.white
    }
  }), { isActive });

  return (
    <TouchableOpacity onPress={onPress} style={styles.button}>
      <CustomText>{title}</CustomText>
    </TouchableOpacity>
  );
};

也可以用样式数组拼接的方式，更直观：

const colors = useThemeColors();
const baseStyles = StyleSheet.create({
  button: {
    // 基础样式
  }
});

// 在JSX中根据props拼接样式
<TouchableOpacity style={[baseStyles.button, isActive && {backgroundColor: colors.primary}]} />

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