是否可以放置一个<View>?在另一个反应原生? [英] Is it possible to place one &lt;View&gt; over another in react-native?

问题描述

我想将一个 放在 react-native 中的另一个之上.这是我的代码:

I want to place one <View> over another in react-native. Here is my code:

<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'
}

我现在的问题是，带有图像的视图在我的vNewView"上方，但vNewView"的边框在前景中并与我的vimgProduct"重叠.

My problem now is, that the View with Image is over my "vNewView" but the border of "vNewView" is in foreground and overlaps my "vimgProduct".

我希望我的 vNewView 在后台，而我的 vimgProduct 在前台.我怎样才能做到这一点?在 HTML/CSS 中，我认为它适用于 zIndex.

I want that my vNewView is in background and my vimgProduct is in foreground. How can I achieve this? In HTML/CSS it works with zIndex I think.

你能帮我吗?会很棒！

最好的问候，奥尔本

推荐答案

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

To achieve similar functionality to z-index in react native, you simply need to place your components in the order that they are intended to be layered. For example, if you have three components in a row, then the second will overlay the first, and the third will overlay the second, so on and so forth.

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

For what you are doing, maybe try placing the vNewView as the first item in the view and use position: 'absolute' .

这篇关于是否可以放置一个<View>?在另一个反应原生?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！