react-native - 是否可以在 react native 中将一个 <View> 放在另一个之上？

Question

我想放置一个 <View>在另一个 react native 上。这是我的代码:

<View style={styles.container}>
  <View style={styles.vimgProduct}>
    <Image style={styles.imgProduct} source={{uri: "http://www.unclesamsjamms.com/unclesamcash7.jpg"}}/>
  </View>
  <View style={styles.vNewView}>
  </View>
</View>`

这是我的风格:

container: {
        flex: 1,
        paddingTop: 65,
        backgroundColor: "#F5FCFF"
},
vimgProduct: {
        paddingTop: 20,
        justifyContent: 'center',
        alignItems: 'center'
},
vNewView: {
        height: 400,
        paddingVertical: 20,
        marginTop: -60,
        marginHorizontal: 40,
        borderWidth: 3,
        borderColor: "black",
        borderRadius: 15,
        flexDirection: "row",
        justifyContent: 'center',
        alignItems: 'center'
}

我现在的问题是，带图像的 View 在我的“vNewView”上方，但“vNewView”的边框在前景中并与我的“vimgProduct”重叠。

我希望我的 vNewView 在后台，而我的 vimgProduct 在前台。我怎样才能做到这一点？在 HTML/CSS 中，我认为它与 zIndex 一起使用。

你能帮我一下吗？会很棒!

最好的问候， 阿尔类

Answer 1

要在 React Native 中实现与 z-index 类似的功能，您只需要按照预期的分层顺序放置组件即可。例如，如果一行中有三个组件，那么第二个将覆盖第一个，第三个将覆盖第二个，依此类推。

对于您正在做的事情，可以尝试将 vNewView 作为 View 中的第一项并使用 position: 'absolute' 。