React Native纯View实现曲线堆叠遮罩卡片 规避Masked View的Gradle问题

完全不需要引入react-native-svg、masked-view这类带原生依赖的库，靠普通View的圆角属性就能复刻目标效果，直接绕开Gradle构建报错的问题。

实现逻辑 #

你原来用SVG画的那个白色补位块，本质就是一个以左下角为圆心的四分之一圆弧实心块，只需要用一个普通View，设置匹配尺寸和对应圆角，就能完全复刻这个形状，不需要写任何矢量路径，也不需要引入图形类的原生依赖。

替换后的代码 #

组件结构 #

把原来引入的SvgExclude组件全部删掉，替换成一个普通View即可：

<View style={styles.card}>
  <Image
    source={{
      uri: 'https://media.istockphoto.com/vectors/flat-cityscape-with-blue-sky-white-clouds-and-sun-modern-city-skyline-vector-id931139544?s=612x612'
    }}
    style={[
      styles.cardImage,
      {
        marginTop: 0,
        resizeMode: 'cover',
      }
    ]}
  />
  {/* 纯View实现斜角补位，替代原SVG组件 */}
  <View style={styles.angledCutout} />
  <View style={styles.cardDescription}>
    <Text>Kota Indonesia dan Keunikannya</Text>
  </View>
</View>

调整后的样式 #

const styles = StyleSheet.create({
  card: {
    marginTop: 16,
    width: windowWidth - 32,
    marginHorizontal: 16,
    backgroundColor: '#FFF',
    height: 179,
    borderRadius: 16,
    elevation: 2,
    overflow: 'hidden',
  },
  cardImage: {
    width: '100%',
    height: 134,
    backgroundColor: 'black',
    position: 'absolute',
    top: 0,
  },
  // 斜角补位块：16x16尺寸 + 16px左下圆角，完全匹配原SVG形状
  angledCutout: {
    position: 'absolute',
    bottom: 60,
    right: 0,
    width: 16,
    height: 16,
    backgroundColor: '#FFF',
    borderBottomLeftRadius: 16,
  },
  cardDescription: {
    height: 60,
    width: windowWidth - 32,
    backgroundColor: '#FFF',
    position: 'absolute',
    bottom: 0,
    padding: 12,
    // 去掉原样式里多余的顶部圆角，只保留底部的卡片圆角
    borderBottomLeftRadius: 16,
    borderBottomRightRadius: 16,
  },
});

调整说明 #

• 原来的SvgExclude组件的填充路径，刚好和16x16尺寸、带16px左下圆角的白色View形状完全一致，视觉上没有任何差异
• 所有效果都在JS层通过样式实现，从根源上避开原生依赖引入带来的构建兼容问题
• 如果觉得圆弧弧度和目标效果有细微偏差，只需要等比例调整angledCutout的宽高和对应的圆角半径即可，不需要改动整体结构

内容的提问来源于stack exchange，提问作者Aqshal Fajar