React native 是否可以放置一个<；视图>；而不是另一个？

我想在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>`

我现在的问题是，带有图像的视图位于我的“vNewView”上方，但“vNewView”的边框位于前景，并与我的“vimgProduct”重叠

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

你能帮我一下吗？那太好了

致以最良好的祝愿，

---

Alban

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

---

对于您正在执行的操作，可以尝试将vNewView作为视图中的第一项，并使用

位置：'absolute'

我想这里有一个覆盖容器，可以用来覆盖视图：

import React, { ReactElement } from 'react';
import { View, StyleSheet, ViewStyle, StyleProp } from 'react-native';

type OverlayContainerProps = {
  back?: ReactElement;
  front?: ReactElement;
  backViewStyle?: StyleProp<ViewStyle>;
  frontViewStyle?: StyleProp<ViewStyle>;
  containerStyle?: StyleProp<ViewStyle>;
};

export default function OverlayContainer({
  back,
  front,
  backViewStyle,
  frontViewStyle,
  containerStyle,
}: OverlayContainerProps): ReactElement {
  return (
    <View style={[styles.container, containerStyle]}>
      <View style={backViewStyle}>{back}</View>
      <View style={[styles.front, frontViewStyle]}>{front}</View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignContent: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  },
  front: {
    position: 'absolute',
    zIndex: 1,
  },
});

import React，{ReactElement}来自'React'；
从“react native”导入{View，StyleSheet，ViewStyle，StyleProp}；
类型OverlyContainerProps={
背？：反应元件；
前？：反应元件；
backViewStyle？：StyleProp；
frontViewStyle？：StyleProp；
containerStyle？：StyleProp；
};
导出默认函数OverlyContainer({
返回
前面,，
背景风格，
frontViewStyle，
集装箱运输，
}：OverlyContainerProps）：反应元素{
返回(
{back}
{front}
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐内容：“中心”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
正面：{
位置：'绝对'，
zIndex:1，
},
});

---

值得赞扬的是，我从看到这段代码中得到了这种方法的灵感：

目前，react native不支持zIndex。有关更多详细信息，请参阅。对于

vimgProduct

，您可以使用

position:'absolute'

，我在这里搜索类似的内容：您看到了吗？我想做完全一样的…@Nader Dabit。您提供的链接不再有效。

import React, { ReactElement } from 'react';
import { View, StyleSheet, ViewStyle, StyleProp } from 'react-native';

type OverlayContainerProps = {
  back?: ReactElement;
  front?: ReactElement;
  backViewStyle?: StyleProp<ViewStyle>;
  frontViewStyle?: StyleProp<ViewStyle>;
  containerStyle?: StyleProp<ViewStyle>;
};

export default function OverlayContainer({
  back,
  front,
  backViewStyle,
  frontViewStyle,
  containerStyle,
}: OverlayContainerProps): ReactElement {
  return (
    <View style={[styles.container, containerStyle]}>
      <View style={backViewStyle}>{back}</View>
      <View style={[styles.front, frontViewStyle]}>{front}</View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignContent: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  },
  front: {
    position: 'absolute',
    zIndex: 1,
  },
});