React Native实现底部内凹容器嵌套图片效果（无需额外模块）

可以不用额外模块实现，核心思路是用绝对定位的View组合模拟内凹遮罩，具体实现如下：

实现代码 #

import { View, Image } from 'react-native';

// 替换为你的页面背景色
const PAGE_BACKGROUND = '#ffffff';

export default function CurvedImageContainer() {
  return (
    <View style={{
      width: '100%',
      height: root.uiStore.height * 0.6,
      position: 'relative',
      overflow: 'hidden',
      marginVertical: 20,
      elevation: 5,
    }}>
      {/* 主图片 */}
      <Image
        style={{ width: '100%', height: '100%', resizeMode: 'cover' }}
        source={{ uri: env.BASE_URL + active_user.images[2] }}
      />

      {/* 底部遮罩基础层：覆盖图片底部区域，颜色与页面背景一致 */}
      <View style={{
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        height: 40, // 控制内凹的深度，可自行调整
        backgroundColor: PAGE_BACKGROUND,
      }} />

      {/* 内凹弧形核心：圆形View，一半超出容器外，形成内凹效果 */}
      <View style={{
        position: 'absolute',
        bottom: -20, // 负数值让圆形一半在容器外
        left: '50%',
        transform: [{ translateX: -50 }],
        width: 80, // 圆形直径，控制内凹的宽度
        height: 80,
        borderRadius: 40,
        backgroundColor: PAGE_BACKGROUND,
      }} />
    </View>
  );
}

原理说明 #

1. 外层容器开启overflow: hidden，确保超出容器的元素被隐藏
2. 底部基础遮罩View覆盖图片底部，颜色与页面背景统一
3. 居中的圆形View一半位于容器外部，容器内的部分形成向上的半圆，与基础遮罩组合后，就呈现出图片底部内凹的弧形效果

你之前用borderRadius无法实现，是因为普通的borderRadius只能实现外凸圆角，而内凹效果需要通过反向遮罩的方式模拟。

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