Question

我正在尝试制作一个包含两个图像作为背景的Wrapper组件，并在其中包含子项布局。

这是在ReactNative中，但它是一般的React原则。

我可以轻松地使用一张图片

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

但是现在我想用两张图片来做这件事，并说然后用n张图片进行推广。

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

在这里，我不确定在哪里或如何安置孩子。我希望使用position:absolute避免任何事情。我也玩过z-index，但我发现最终还是要涉及position:absolute。

Answer 1

如果您希望将彼此相邻的图像作为背景布局，则需要使用flex渲染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将获取容器的所有空间。

创建具有图像作为背景的复合反应组件

1 个答案: