React Native如何实现单角内凹圆角？两个矩形打造内凹半圆视觉效果

React Native 原生提供的borderRadius系列属性仅支持外凸圆角，要实现单角向内凹陷的效果，可选用以下两种兼容度较高的方案，基于你现有的左右容器结构改造即可：

方案1：绝对定位反向圆拼接（全版本兼容） #

利用和页面背景色一致的圆形绝对定位到容器边角，通过视觉差形成内凹效果，适配所有React Native版本：

// 原有容器样式新增相对定位配置
leftContainer: {
    width:'50%',
    height: Dimensions.get('window').height,
    flex: 1,
    position: 'relative',
    backgroundColor: '#左容器实际背景色', // 替换为你的项目色值
},
rightContainer: {
    width:'50%',
    height: Dimensions.get('window').height,
    flex: 1,
    backgroundColor: '#右容器实际背景色', // 替换为你的项目色值
},
// 新增内凹半圆样式，示例为左容器右上角内凹
concaveCorner: {
    position: 'absolute',
    top: 0,
    right: -20, // 偏移值等于半圆半径，刚好对齐两个容器接缝
    width: 40, // 半圆直径，可按需调整大小
    height: 40,
    borderRadius: 20, // 等于宽度的一半形成正圆
    backgroundColor: '#页面全局背景色', // 替换为两个容器外层的背景色
}

组件结构参考：

<View style={{flexDirection: 'row'}}>
  <View style={styles.leftContainer}>
    {/* 左容器业务内容 */}
    <View style={styles.concaveCorner} />
  </View>
  <View style={styles.rightContainer}>
    {/* 右容器业务内容 */}
  </View>
</View>

如果需要调整内凹的位置，修改concaveCorner的上下左右定位参数即可。

方案2：径向渐变实现（代码更简洁，需RN 0.63+） #

不需要新增额外组件，直接给容器添加径向渐变背景即可实现内凹效果：

leftContainer: {
    width:'50%',
    height: Dimensions.get('window').height,
    flex: 1,
    backgroundColor: '#左容器实际背景色',
    // 20px为内凹圆角半径，可按需调整
    backgroundImage: `radial-gradient(circle at top right, transparent 20px, #左容器实际背景色 0)`,
}

如果需要调整内凹位置，修改radial-gradient的circle at后的位置参数即可，比如修改为bottom right就是右下角内凹。
注意：该方案仅支持React Native 0.63及以上版本，老旧安卓设备可能存在渲染异常，对兼容性要求高的场景优先选用方案1。

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