React Native开发Tinder克隆时Image加elevation报错、zIndex安卓无效求助

• 报错触发原因：elevation 是安卓端专属样式属性，仅支持View类型组件，直接给Image组件添加该属性会触发PropType校验失败，就是你收到的警告内容。
• 图片无法置顶原因：安卓端zIndex生效规则比iOS严格，一是同层级节点默认渲染顺序靠后的覆盖靠前的，你当前代码中Card组件写在Image之后，本身就会默认覆盖图片；二是单独给Image加zIndex在安卓端不会被正确识别，需要绑定到View容器上才能生效。

1. 给两个标记图片外层套一个View容器，将层级相关属性都移到这个容器上
2. 删掉Image样式里的elevation、position、top、zIndex属性

修改后的JSX代码片段 #

<PanGestureHandler onGestureEvent={gestureHandler}>
  <Animated.View style={[styles.animatedCard, cardStyle]}>
    {/* 新增外层View容器 */}
    <View style={styles.badgeContainer}>
      <Image source={like} style={styles.like} resizeMode="contain" />
      <Image source={nope} style={styles.like} resizeMode="contain" />
    </View>
    <Card user={currentProfile} />
  </Animated.View>
</PanGestureHandler>

修改后的样式代码片段 #

const styles = StyleSheet.create({
  // 原有其他样式保持不变
  badgeContainer: {
    position: 'absolute',
    top: 10,
    zIndex: 100, // 数值设高避免被其他元素覆盖
    elevation: 10, // 安卓端层级控制属性，加在View上不会报错
  },
  like: {
    width: 150,
    height: 150,
    // 删掉原来的position、top、zIndex、elevation属性
  },
});

如果修改后还是看不到标记图片，检查animatedCard样式是否设置了overflow: hidden，如有该属性直接删除即可。

内容的提问来源于stack exchange，提问作者Awais Raza