如何避免在React Native组件中重复调用钩子以实现主题与响应式样式？

我太懂这种每个组件都要写const styles = useStyles()的繁琐感了——项目小的时候还好，组件多了之后简直是重复劳动。结合你现有的Zustand主题存储和响应式尺寸方案，咱们可以用下面几种方式来优化，既能保留动态样式的特性，又能减少重复代码：

方案一：用高阶组件（HOC）自动注入样式 #

高阶组件可以帮我们把useStyles()的调用逻辑封装起来，不用在每个组件里手动写。

步骤1：创建withStyles高阶组件 #

新建一个withStyles.tsx文件：

import React from 'react';
import { useStyles } from './styles';

// 定义HOC，接收组件并返回注入了styles的新组件
export const withStyles = <P extends object>(Component: React.ComponentType<P & { styles: ReturnType<typeof useStyles> }>) => {
  return (props: P) => {
    const styles = useStyles();
    return <Component {...props} styles={styles} />;
  };
};

步骤2：修改组件使用HOC #

比如你的HomeScreen可以改成这样：

function HomeScreen({ navigation, styles }: StackScreenProps<RootStackParamList, 'Home'> & { styles: ReturnType<typeof useStyles> }) {
  const toggleTheme = useThemeStore(state => state.toggleTheme);

  return (
    <View style={styles.screen}>
      <View style={[styles.container, { marginTop: 40 }]}>
        <Text style={styles.header}>Home Screen</Text>
        <Text style={styles.text}>Current theme settings</Text>
      </View>
      
      <View style={styles.container}>
        <Button title="Toggle Theme" onPress={toggleTheme} />
        <TouchableOpacity
          style={[styles.button, { marginTop: 16 }]}
          onPress={() => navigation.navigate('Settings')}
        >
          <Text style={styles.buttonText}>Go to Settings</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

// 用HOC包裹组件，自动注入styles props
export default withStyles(HomeScreen);

这样组件里就不用手动调用useStyles()了，只需要通过props拿到styles即可。

方案二：全局样式上下文 + 自定义Hook #

如果觉得HOC的方式不够优雅，也可以用React上下文来全局提供样式，然后用一个统一的Hook来获取。

步骤1：创建样式上下文 #

新建StyleContext.tsx：

import React, { createContext, useContext } from 'react';
import { useStyles } from './styles';

// 创建上下文，初始值为null
const StyleContext = createContext<ReturnType<typeof useStyles> | null>(null);

// 定义Provider组件，内部调用useStyles并传递给上下文
export const StyleProvider = ({ children }: { children: React.ReactNode }) => {
  const styles = useStyles();
  return <StyleContext.Provider value={styles}>{children}</StyleContext.Provider>;
};

// 封装一个安全的Hook，确保只能在Provider内使用
export const useAppStyles = () => {
  const styles = useContext(StyleContext);
  if (!styles) {
    throw new Error('useAppStyles必须在StyleProvider组件内部使用');
  }
  return styles;
};

步骤2：在App中添加Provider #

修改App.tsx，用StyleProvider包裹整个应用：

export default function App() {
  const theme = useThemeStore(state => state.theme);

  const navigationTheme = {
    ...DefaultTheme,
    dark: theme === 'dark',
    colors: {
      ...DefaultTheme.colors,
      ...colors[theme],
    },
  };

  return (
    <StyleProvider>
      <NavigationContainer theme={navigationTheme}>
        <Stack.Navigator
          screenOptions={{
            headerStyle: {
              backgroundColor: navigationTheme.colors.card,
            },
            headerTintColor: navigationTheme.colors.text,
          }}
        >
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Settings" component={SettingsScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </StyleProvider>
  );
}

步骤3：在组件中使用统一Hook #

现在组件里只需要导入useAppStyles即可，不用再单独导入useStyles：

import { useAppStyles } from './StyleContext';

function SettingsScreen({ navigation }: StackScreenProps<RootStackParamList, 'Settings'>) {
  const styles = useAppStyles();
  const theme = useThemeStore(state => state.theme);

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

这个方案的好处是样式逻辑集中在一处，后续如果要修改样式生成规则，只需要调整useStyles或者上下文逻辑即可。

方案三：将样式整合到Zustand Store中 #

既然你已经在用Zustand管理主题，也可以把样式生成逻辑整合到Store里，让样式自动订阅主题和尺寸的变化。

步骤1：创建样式Store #

新建styleStore.ts：

import { create } from 'zustand';
import { useThemeStore } from './themeStore';
import { useDimensionsStore } from './dimensionsStore';
import { StyleSheet } from 'react-native';
import { colors } from './themeStore';

export const useStyleStore = create(() => ({
  // 定义获取样式的方法，依赖当前主题和尺寸
  getStyles: () => {
    const theme = useThemeStore.getState().theme;
    const { width, height } = useDimensionsStore.getState();
    const themeColors = colors[theme];

    return StyleSheet.create({
      screen: {
        flex: 1,
        backgroundColor: themeColors.background,
        width,
        height,
      },
      container: {
        padding: 16,
        backgroundColor: themeColors.card,
        borderRadius: 8,
        margin: 8,
      },
      text: {
        color: themeColors.text,
        fontSize: 16,
      },
      header: {
        color: themeColors.primary,
        fontSize: 24,
        fontWeight: 'bold',
      },
      button: {
        backgroundColor: themeColors.primary,
        padding: 12,
        borderRadius: 8,
        alignItems: 'center',
      },
      buttonText: {
        color: themeColors.background,
        fontWeight: 'bold',
      },
    });
  },
}));

// 订阅主题和尺寸变化，确保样式自动更新
useThemeStore.subscribe(() => {
  useStyleStore.getState().getStyles();
});

useDimensionsStore.subscribe(() => {
  useStyleStore.getState().getStyles();
});

步骤2：在组件中使用Store #

现在组件里只需要从styleStore获取样式：

import { useStyleStore } from './styleStore';

function HomeScreen({ navigation }: StackScreenProps<RootStackParamList, 'Home'>) {
  const styles = useStyleStore(state => state.getStyles());
  const toggleTheme = useThemeStore(state => state.toggleTheme);

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

这个方案把样式逻辑和状态管理整合到了一起，适合已经深度使用Zustand的项目。

注意事项 #

不管用哪种方案，都要注意：

• StyleSheet.create在React Native中是经过优化的，即使每次主题变化都重新创建，性能开销也很小，不用担心性能问题。
• 如果你的样式中有大量静态部分，可以把静态样式抽出来，只动态生成依赖主题和尺寸的部分，进一步优化性能。

备注：内容来源于stack exchange，提问作者AndrewHoover898