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

我现在的问题是，带图像的视图已经过了我的＆＃34; vNewView＆＃34;但是＆＃34; vNewView＆＃34;的边界在前景中并重叠我的＆＃34; vimgProduct＆＃34;。

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

你能帮帮我吗？太棒了！

最好的问候，阿尔

Answer 1

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

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

是否可以在react-native中放置一个<view>而不是另一个？

1 个答案: