画像を背景として複合反応コンポーネントを作成する

Question

2つの画像を背景としてラッパーコンポーネントを作成しようとしていて、内部に子レイアウトがあります。

これはReactNativeにありますが、一般的なReactの原則です。

私は簡単に一つの画像でこれを行うことができ、

const F = ({children}) => (
    <Image...>{children}</Image> 
); 

が、今私は、2枚の画像でこれをやってみたい、その後、n個の画像を一般化と言います。

const Background = ({children}) => (
    <View style={{flex:1}}> 
    {image_1} 
    {image_2} 
    </View> 
); 

ここで私はどこで、どのように子供を配置するか分からない。私はposition:absoluteを使って何も避けたいです。私もz-indexで演奏してきましたが、それにはposition:absoluteも関与しなければなりません。

Answer 1

画像を隣り合わせに配置したい場合は、フレックスを使用している画像でViewをレンダリングする必要があります。そしてそのViewは絶対的な位置になり、その容器全体に伸びます。線に沿って 何か：

const Background = ({children}) => (
    <View style={{position:'absolute', top:0,bottom:0,right:0,left:0, flexDirection: 'column', zIndex: 1}}> 
    {children} 
    </View> 
); 

const ContainerOfAllThisStuff = (p) => (
    <View> 
     <Background> 
      <Image1 /> 
      <Image2 /> 
     </Background> 
     <RealView /> 
    </View> 
) 

は基本的には、ContainerOfAllThisStuffはBackgroundは何の任意の領域をつかんで、ちょうど絶対位置だそれのためにそれの背景に滞在していません。そして、flex:1（そしてたぶんzIndex）のRealViewはコンテナのすべてのスペースをつかむでしょう。