嵌套在图像内部<Image>但位于图像后面

Question

我遇到的问题是图像内部的图像位于外部图像的顶部，外部图像是半透明图像，所以我希望它位于嵌套图像的顶部，作为叠加图像，我该怎么办？

<Image
style={it}
source={require('../../img/Rarities/red.png')}
>
<View>
{
item[2] != null ?
<View style={{ width: 15, height: 15, backgroundColor: item[2].Color }} />
: null
}
<Image
style={{height:'70%',width:'70%'}}
source={{ uri: item[1].base64 }}
/>
</View>
</Image>

我试过了：

更改图像的zIndex不起作用。

Answer 1

在 React Native 中，组件按定义顺序呈现 - 因此颠倒顺序并在子节点之上渲染父组件可能会很棘手。

相反，您可以将图像呈现为同级，并使用带有一些position: absolute技巧的父容器组件来使图像彼此对齐。

对于以下视图结构：

<View style={styles.imageContainer}>
<Image source={{uri: image1}} style={styles.bottom} />
<Image source={{uri: image2}} style={styles.top} />
</View>

您可以通过以下样式实现此效果。有关说明，请参阅内联注释：

const styles = StyleSheet.create({
// The container controls the top image size
imageContainer: {
width: 200,
height: 200
},
bottom: {
// horizontal margin: (100% -width) / 2
marginHorizontal: '15%',
// vertical margin: (100% - height) / 2
marginVertical: '15%',
width: '70%',
height: '70%'  
},
top: {
// positioned absolutely
position: 'absolute',
opacity: 0.5,
// full width/height of imageContainer
width: '100%',
height: '100%'
},
});

您可以在此零食演示中看到它的实际效果。

Answer 2

我不确定我是否正确理解你的意思，但如果你想让它们彼此内部，你可以像这样使用Image组件：

<View>
<Image
style={{flex:1}}
source={require('./img/favicon.png')}
/>
<Image
style={{height:'30',width:'30', position:'absolute'}}
source={require('./img/favicon.png')}
/>
</View> 

注意：应更换Image源和尺寸。