寻求简化React Native组件基于属性的样式控制方法

你的核心需求是通过动态控制styles.hide的添加/移除来消除重复代码，这里提供两种优化方案：

方案一：提取复用组件（推荐，适合后续扩展） #

将左右图标公共逻辑抽成独立组件，通过参数传递差异项，彻底消除重复代码：

import React from "react";
import { StyleSheet, ImageBackground, Text } from "react-native";

import colors from "../../config/colors";
import fonts from "../../config/fonts";

import Frame_Menu_Header from "../../components/Frame_Menu_Header";
import Frame_Icon from "../../components/Frame_Icon";

// 复用菜单图标组件，接收样式、图标样式、图片源和隐藏状态参数
const MenuIcon = ({ frameStyle, iconStyle, source, shouldHide }) => {
  // 动态生成样式数组：需要隐藏时追加hide样式
  const appliedStyles = shouldHide ? [...frameStyle, styles.hide] : frameStyle;
  // 根据样式判断图标位置，传递对应props
  const iconProps = frameStyle.includes(styles.top_left_menu_frame_icon) 
    ? { top_left_menu: appliedStyles } 
    : { top_right_menu: appliedStyles };

  return (
    <Frame_Icon {...iconProps}>
      <ImageBackground style={iconStyle} source={source} />
    </Frame_Icon>
  );
};

function Container_Menu_Header({ title, options }) {
  // 统一控制隐藏状态：原逻辑为options不存在时隐藏图标
  const shouldHideIcons = !options;

  return (
    <Frame_Menu_Header>
      <MenuIcon
        frameStyle={[styles.top_left_menu_frame_icon]}
        iconStyle={styles.icon}
        source={require("../../assets/_UI/Icon_Symbol_Checkmark.svg")}
        shouldHide={shouldHideIcons}
      />
      <Text style={[styles.text, styles.h1, styles.menu_title]}>{title}</Text>
      <MenuIcon
        frameStyle={[styles.top_right_menu_frame_icon]}
        iconStyle={[styles.icon, { height: 12 }]}
        source={require("../../assets/_UI/Icon_Symbol_Arrow.svg")}
        shouldHide={shouldHideIcons}
      />
    </Frame_Menu_Header>
  );
}

const styles = StyleSheet.create({
  menu_title: {
    marginTop: 10,
  },
  top_left_menu_frame_icon: {
    marginLeft: 8,
    marginTop: 9,
  },
  top_right_menu_frame_icon: {
    marginRight: 8,
    marginTop: 9,
  },
  text: {
    fontFamily: fonts.primary,
  },
  h1: {
    fontSize: fonts.h1,
    lineHeight: 16,
  },
  icon: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    width: 16,
    height: 16,
    marginBottom: 1,
  },
  hide: {
    opacity: 0,
  },
});

export default Container_Menu_Header;

方案一优势 #

• 彻底消除重复的Frame_Icon和ImageBackground代码
• 隐藏逻辑集中管理，后续修改只需调整shouldHideIcons的判断条件
• 新增同类图标时直接复用MenuIcon组件，降低维护成本

方案二：直接动态生成样式（轻量简洁） #

如果不需要新增组件，可直接在原组件内计算样式数组，减少分支判断：

import React from "react";
import { StyleSheet, ImageBackground, Text } from "react-native";

import colors from "../../config/colors";
import fonts from "../../config/fonts";

import Frame_Menu_Header from "../../components/Frame_Menu_Header";
import Frame_Icon from "../../components/Frame_Icon";

function Container_Menu_Header({ title, options }) {
  // 动态生成左右图标样式：options存在时不添加hide，不存在时追加hide
  const leftIconStyles = options 
    ? [styles.top_left_menu_frame_icon] 
    : [...styles.top_left_menu_frame_icon, styles.hide];
  const rightIconStyles = options 
    ? [styles.top_right_menu_frame_icon] 
    : [...styles.top_right_menu_frame_icon, styles.hide];

  return (
    <Frame_Menu_Header>
      <Frame_Icon top_left_menu={leftIconStyles}>
        <ImageBackground
          style={styles.icon}
          source={require("../../assets/_UI/Icon_Symbol_Checkmark.svg")}
        />
      </Frame_Icon>
      <Text style={[styles.text, styles.h1, styles.menu_title]}>{title}</Text>
      <Frame_Icon top_right_menu={rightIconStyles}>
        <ImageBackground
          style={[styles.icon, { height: 12 }]}
          source={require("../../assets/_UI/Icon_Symbol_Arrow.svg")}
        />
      </Frame_Icon>
    </Frame_Menu_Header>
  );
}

const styles = StyleSheet.create({
  menu_title: {
    marginTop: 10,
  },
  top_left_menu_frame_icon: {
    marginLeft: 8,
    marginTop: 9,
  },
  top_right_menu_frame_icon: {
    marginRight: 8,
    marginTop: 9,
  },
  text: {
    fontFamily: fonts.primary,
  },
  h1: {
    fontSize: fonts.h1,
    lineHeight: 16,
  },
  icon: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    width: 16,
    height: 16,
    marginBottom: 1,
  },
  hide: {
    opacity: 0,
  },
});

export default Container_Menu_Header;

方案二优势 #

• 无需新增组件，代码改动最小
• 保留原组件结构，逻辑直观易懂

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