Javascript 基于是否存在组件属性启用样式的更简单方法

为了解释我目前正在使用这个Reaction原生组件做什么，我隐藏了一些元素，如果我的屏幕中的Container_Menu_Header上有‘Options’.(添加或删除标题选项).

下面的一切都运行得很好，但我感兴趣的是用更少的代码编写相同的功能.当Container_Menu_Header具有Options属性时，必须有一种更简单的方法来删除或添加样式.隐藏样式.

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 }) {
  return (
    <Frame_Menu_Header>
      {options ? (
        <Frame_Icon top_left_menu={[styles.top_left_menu_frame_icon]}>
          <ImageBackground
            style={styles.icon}
            source={require("../../assets/_UI/Icon_Symbol_Checkmark.svg")}
          ></ImageBackground>
        </Frame_Icon>
      ) : (
        <Frame_Icon
          top_left_menu={[styles.top_left_menu_frame_icon, styles.hide]}
        >
          <ImageBackground
            style={styles.icon}
            source={require("../../assets/_UI/Icon_Symbol_Checkmark.svg")}
          ></ImageBackground>
        </Frame_Icon>
      )}
      <Text style={[styles.text, styles.h1, styles.menu_title]}>{title}</Text>
      {options ? (
        <Frame_Icon top_right_menu={[styles.top_right_menu_frame_icon]}>
          <ImageBackground
            style={[styles.icon, { height: 12 }]}
            source={require("../../assets/_UI/Icon_Symbol_Arrow.svg")}
          ></ImageBackground>
        </Frame_Icon>
      ) : (
        <Frame_Icon
          top_right_menu={[styles.top_right_menu_frame_icon, styles.hide]}
        >
          <ImageBackground
            style={[styles.icon, { height: 12 }]}
            source={require("../../assets/_UI/Icon_Symbol_Arrow.svg")}
          ></ImageBackground>
        </Frame_Icon>
      )}
    </Frame_Menu_Header>
  );
}

const styles = StyleSheet.create({
  Container_Menu_Header: {},
  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;