Réagissez aux composants tiers de style natif en ajoutant des wrappers

Question

Ma question :

J'essaie d'ajouter mes propres styles au composant fourni par React-native-popup-menu et de l'ajouter à ma bibliothèque de composants. Ils fournissent les composants Menu, MenuOptions et MenuOption avec la hiérarchie attendue suivante :

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

Je prévois de créer un wrapper pour chaque élément, de styliser le composant qu'il contient et de renvoyer le wrapper lorsque quelqu'un l'importe depuis la bibliothèque de composants.

Par exemple, un wrapper pour le composant menu :

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

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

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

Cela ajoute un wrapper (un élément supplémentaire) sur chaque calque, ce qui donne la hiérarchie suivante :

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

Le package n'aime pas ça car il s'appuie sur la hiérarchie pour afficher correctement le menu. Génère l'erreur "MenuOptions devrait être un enfant de Menu"

Existe-t-il un moyen de créer un menu de style personnalisé et de l'exposer en tant que composant dans la bibliothèque de composants ? Si c'était React, je réécrirais la classe CSS, mais il n'y a pas d'effet en cascade dans React-Native.

Tout indice serait très utile. Merci.

Answer 1

Je ne sais pas exactement quel est le problème - j'ajoute donc ici simplement quelques conseils/indices qui pourraient vous aider.

Voir la documentation https://github.com/instea/react-native-popup-menu/blob/master/doc/extensions.md et les exemples

correspondants

À partir de là, je vois que vous pouvez faire/utiliser ce qui suit :

1. Les styles MenuOptions sont pris en charge nativement sans aucun problème

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

2. Un style personnalisé du conteneur d'options semble également possible

<菜单渲染器={RoundedContextMenu}>

Vous avez juste besoin d'un petit passe-partout (voir exemple) - je suppose que l'intégrer dans un composant personnalisé n'est pas un problème

3. Tout style « gauche » est un déclencheur qui accepte n'importe quel enfant... je ne sais pas si cela peut être facilement intégré dans votre propre composant maintenant...