Reagieren Sie auf Komponenten von Drittanbietern im nativen Stil, indem Sie Wrapper hinzufügen

Question

Meine Frage:

Ich versuche, der von „react-native-popup-menu“ bereitgestellten Komponente meine eigenen Stile hinzuzufügen und sie meiner Komponentenbibliothek hinzuzufügen. Sie stellen Menu-, MenuOptions- und MenuOption-Komponenten mit der folgenden erwarteten Hierarchie bereit:

<Menu>
  <MenuOptions>
    <MenuOption text="A">
    </MenuOption>
    <MenuOption text="B">
    </MenuOption>
  </MenuOptions>
</Menu>

Ich habe vor, für jedes Element einen Wrapper zu erstellen, die darin enthaltene Komponente zu formatieren und den Wrapper zurückzugeben, wenn ihn jemand aus der Komponentenbibliothek importiert.

Zum Beispiel ein Wrapper für die Menükomponente:

import { MenuProps } from 'react-native-popup-menu';

type CustomMenuProps = {
  children: React.ReactElement[];
}

const CustomMenu = (props: MenuProps && CustomMenuProps) => {
  return <Menu style={{...someCustomStyle}}>{children}</Menu>
}

Dadurch wird auf jeder Ebene ein Wrapper (ein zusätzliches Element) hinzugefügt, was zu der folgenden Hierarchie führt:

<CustomMenu>
  <Menu>
    <CustomMenuOptions>
      <MenuOptions>...

Dem Paket gefällt das nicht, weil es auf Hierarchie angewiesen ist, um das Menü korrekt anzuzeigen. Löst den Fehler „MenuOptions sollte ein untergeordnetes Element von Menu sein“ aus

Gibt es eine Möglichkeit, ein benutzerdefiniertes Menü zu erstellen und es als Komponente in der Komponentenbibliothek verfügbar zu machen? Wenn es reagieren würde, würde ich die CSS-Klasse neu schreiben, aber in React-Native gibt es keinen Kaskadeneffekt.

Jeder Hinweis wäre sehr hilfreich. Danke.

Answer 1

我不确定到底是什么问题 - 所以我只是在此处添加一些可能对您有帮助的提示/线索。

查看文档 https:// github.com/instea/react-native-popup-menu/blob/master/doc/extensions.md 和相应的 示例

从中我看到您可以执行/使用以下操作：

1. MenuOptions 的样式是原生支持的，没有任何问题

const CheckedOption = (props) => (
      <MenuOption value={props.value} text={'\u2713 ' + props.text} />
    )

2. 选项容器的自定义样式似乎也可以

<菜单渲染器={RoundedContextMenu}>

你只需要一点样板文件（参见示例） - 我想将其包装到自定义组件中不是问题

3. 任何“左侧”样式都是接受任何子项的触发器...现在不确定是否可以轻松地将其包装到您自己的组件中...