如何在React Native中实现如图所示的自定义形状？

针对你想要实现的形状，分两种场景提供解决方案：

场景1：矩形范围内的圆角形状 #

你当前代码的问题在于View高度过小，borderTopLeftRadius: 30的设置远大于View的高度（10），React Native会自动将圆角限制为元素高度的一半（即5），导致无法显示出预期的大圆角效果。

只需调整View的高度，让它足够容纳设置的圆角半径即可：

<View
  style={{
    width: '100%',
    // 调整高度至不小于最大圆角半径
    height: 30,
    borderTopLeftRadius: 30,
    borderTopRightRadius: 10,
    backgroundColor: DefaultVariables.Colors.primary,
  }}
/>

场景2：超出矩形范围的弧形形状 #

如果需要在较小高度的基础上实现大弧度的圆角（比如高度仅为10，但左侧需要30半径的弧形），纯View的borderRadius无法满足，需要使用react-native-svg绘制自定义路径：

1. 先安装依赖：

npm install react-native-svg
# 或
yarn add react-native-svg

2. 使用SVG路径绘制目标形状：

import Svg, { Path } from 'react-native-svg';

// viewBox的宽高可根据实际需求调整，这里按百分比适配屏幕宽度
<Svg width="100%" height="10" viewBox="0 0 100 10">
  <Path
    // 路径说明：从左侧弧形终点开始，到右侧圆角起点，绘制右侧圆角，到底部左侧，再绘制左侧大弧形，最后闭合路径
    d="M30,0 L90,0 Q100,0 100,10 L0,10 Q0,0 30,0 Z"
    fill={DefaultVariables.Colors.primary}
  />
</Svg>

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