如何在React Native中实现iOS风格的Continuous Rounded Corners（连续圆角）

在iOS中，continuous rounded corners（平滑圆角）能让边角过渡更自然，避免普通圆角的生硬折线感。在React Native中可以通过以下方式实现：

1. 官方原生属性（推荐，RN 0.68+） #

React Native 0.68及以上版本支持borderCurve属性，设置为'continuous'即可开启iOS的平滑圆角效果，该属性仅在iOS 13+生效（对应系统原生能力）。

代码示例 #

import React from 'react';
import { View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      {/* 普通圆角（红色） */}
      <View style={styles.normalBox} />
      {/* 平滑圆角（橙色） */}
      <View style={styles.smoothBox} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 20,
  },
  normalBox: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
    borderRadius: 20,
  },
  smoothBox: {
    width: 100,
    height: 100,
    backgroundColor: 'orange',
    borderRadius: 20,
    // 开启iOS平滑圆角
    borderCurve: 'continuous',
  },
});

2. 低版本RN兼容方案 #

如果你的React Native版本低于0.68，没有borderCurve属性，可以选择：

• 使用第三方封装库（针对iOS实现原生continuousCorners能力）
• 自定义原生扩展：在iOS端创建自定义View，设置其layer.continuousCorners = true，再封装为React Native组件供JS层调用。

注意事项 #

• borderCurve仅支持iOS平台，Android端会自动忽略该属性，保持普通圆角表现。
• 图片组件（Image）同样适用：设置borderRadius+borderCurve: 'continuous'，若需要裁剪图片边缘，需配合overflow: 'hidden'使用。

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