Créer un composant composite React avec des images comme arrière-plan

Question

Je tente de créer un composant Conteneur avec deux images en arrière-plan et avoir une mise en page des enfants à l'intérieur.

Cela se fait en ReactNative mais c'est basé sur des principes généraux de React.

Je peux le faire facilement avec une seule image,

const F = ({children}) => (
  {children}
);

mais maintenant je veux le faire avec deux images, et éventuellement généraliser avec n images.

const Background = ({children}) => (

    {image_1}
    {image_2}

);

Et ici, je ne suis pas sûr où, ou comment placer les enfants. Je veux éviter tout ce qui utilise position:absolute. J'ai également joué avec z-index, mais je trouve que cela finira par devoir impliquer position:absolute aussi.

Answer 1

Si vous souhaitez afficher des images côte à côte en arrière-plan, vous devrez rendre une View avec ces images en utilisant probablement flex. Et cette View sera également positionnée en absolue et s'étirera sur tout son conteneur. Quelque chose comme :

const Background = ({children}) => (

    {children}

);

const ContainerOfAllThisStuff = (p) => (

)

Fondamentalement, ContainerOfAllThisStuff aura Background sans prendre aucun espace et restera simplement en arrière-plan en raison de sa position absolue. Et RealView avec flex:1 (et peut-être zIndex) occupera tout l'espace du conteneur.