React Native中ScrollView与View边框表现不一致问题如何解决

相同宽度、相同边框样式设置下，ScrollView 和 View 的边框表现存在差异，想要实现 ScrollView 那种弧度更大的边框效果。
已尝试给容器 View 添加额外内边距、给内部元素设置外边距、将背景改为透明、给 View 内所有元素设置相同圆角等方案，均未生效。即便 View 内部没有嵌套任何元素，也会出现同样的问题。

原始测试代码如下：

import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, Dimensions } from 'react-native';

const { width } = Dimensions.get('screen');

export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView
        style={{
          borderTopLeftRadius: 30,
          borderTopRightRadius: 30,
          borderTopWidth: 6,
          borderColor: 'cyan',
          width,
        }}
        contentContainerStyle={{
          paddingTop: 150,
        }}>
        <View
          style={{
            height: 150,
            width,
            backgroundColor: '#fff',
            borderTopLeftRadius: 30,
            borderTopRightRadius: 30,
            borderTopWidth: 6,
            borderColor: 'cyan',
          }}
        />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
  },
});

问题原因 #

React Native 中borderRadius默认定义的是元素边框外边缘的圆角半径，当元素设置了边框宽度时，边框内边缘的圆角半径会自动计算为设置的 borderRadius 值 - borderWidth 值，这就是 View 的圆角弧度看起来比 ScrollView 小的核心原因。
你给 ScrollView 设置的borderTopRadius:30是外边缘圆角，所以直观看到的弧度就是 30px 的效果；而内部 View 同样设置 30px 圆角+6px 边框，它的内边缘圆角实际只有 24px，所以看起来弧度更小。

解决方案 #

你可以根据业务场景选择以下任意一种方案实现效果：

方案1：调整内部 View 的圆角数值 #

给内部 View 的圆角值加上边框宽度即可抵消内边缘的压缩，直接设置borderTopLeftRadius和borderTopRightRadius为 36 即可和 ScrollView 的弧度完全匹配，修改后的代码如下：

import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, Dimensions } from 'react-native';

const { width } = Dimensions.get('screen');

export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView
        style={{
          borderTopLeftRadius: 30,
          borderTopRightRadius: 30,
          borderTopWidth: 6,
          borderColor: 'cyan',
          width,
        }}
        contentContainerStyle={{
          paddingTop: 150,
        }}>
        <View
          style={{
            height: 150,
            width,
            backgroundColor: '#fff',
            // 圆角值=目标圆角+边框宽度
            borderTopLeftRadius: 36,
            borderTopRightRadius: 36,
            borderTopWidth: 6,
            borderColor: 'cyan',
          }}
        />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
  },
});

方案2：移除内部 View 的顶部边框 #

如果内部 View 不需要单独设置顶部边框，直接删除内部 View 的borderTopWidth和borderColor属性即可，父级 ScrollView 的边框会直接作为整体的边框显示，弧度完全一致。

方案3：嵌套容器实现 #

给内部元素外层套一个容器，容器设置overflow: hidden和对应圆角，内部元素不需要设置边框和圆角，也能实现统一的大弧度效果。

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