React Native中如何为带阴影的View添加内边框圆角？

我想给React Native元素添加内边框圆角的阴影效果，但设置borderRadius后，阴影只作用在外侧圆角上。下面是我的实现代码、目标效果和当前效果：

现有代码 #

const getCheckListData = (): React.ReactNode => {
    return checkListJSON.map(
        (checklist: CheckListInterface, index: number): React.ReactNode => {
            return (
                <View style={[styles.checkListTile, styles.checkListTileGreen]} key={index}>
                    <Text style={styles.checkListTileText}>{checklist.value}</Text>
                </View>
            );
        },
    );
};

// 样式部分
checkListTileGreen: {
        shadowColor: ThemeConfigs.defaultColors.primaryLightColor,
        shadowOpacity: ThemeConfigs.defaultCard.shadowOpacity,
    },
    checkListTile: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        flexShrink: 1,
        width: wp('28%'),
        height: hp('15%'),
        marginTop: hp('1.5%'),
        marginRight: wp('1.5%'),
        color: ThemeConfigs.defaultColors.textSecondaryColor,
        shadowOffset: {
            width: 1,
            height: 0,
        },
        elevation: 10,
        borderRadius: hp('2%'),
    },

效果对比 #

• 目标效果：
• 当前效果：

解决方案 #

React Native原生的阴影（iOS）和elevation（Android）不支持内阴影，要实现内边框圆角阴影，得用嵌套View+反向遮罩的方式，具体做法如下：

1. 调整样式 #

添加外层和内层View的样式：

// 样式修改后
checkListTileGreen: {
  shadowColor: ThemeConfigs.defaultColors.primaryLightColor,
  shadowOpacity: ThemeConfigs.defaultCard.shadowOpacity,
},
// 外层View：负责显示阴影
checkListTileOuter: {
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  flexShrink: 1,
  width: wp('28%'),
  height: hp('15%'),
  marginTop: hp('1.5%'),
  marginRight: wp('1.5%'),
  shadowOffset: { width: 1, height: 0 },
  elevation: 10,
  borderRadius: hp('2%'),
  padding: 1, // 控制内阴影的厚度，根据需求调整
},
// 内层View：作为内容容器，遮罩掉中间区域的阴影
checkListTileInner: {
  flex: 1,
  borderRadius: hp('2%'),
  backgroundColor: '#ffffff', // 替换成你页面的背景色，确保和外层阴影区分开
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
},
checkListTileText: {
  color: ThemeConfigs.defaultColors.textSecondaryColor,
},

2. 修改组件结构 #

把原来的单个View改成嵌套结构：

const getCheckListData = (): React.ReactNode => {
  return checkListJSON.map(
    (checklist: CheckListInterface, index: number): React.ReactNode => {
      return (
        <View style={[styles.checkListTileOuter, styles.checkListTileGreen]} key={index}>
          <View style={styles.checkListTileInner}>
            <Text style={styles.checkListTileText}>{checklist.value}</Text>
          </View>
        </View>
      );
    },
  );
};

原理说明 #

外层View保留阴影、圆角和原尺寸，通过设置padding留出阴影显示的空间；内层View用相同的圆角和背景色覆盖在外层内部，只露出边缘的阴影，视觉上就形成了内边框的圆角阴影效果。

注意事项 #

• 内层View的背景色必须和父容器/页面背景一致，否则会出现不协调的色块
• 调整外层的padding值可以控制内阴影的粗细
• iOS和Android的阴影表现有差异，可能需要微调shadowOpacity、elevation等参数适配

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