如何在React Native中添加阴影div的内边框半径

Question

如何将内部边框半径应用于我的元素，如下所示，边框半径将其应用于外部阴影

我的是什么样子的：

代码：

        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%'),
        },

Answer 1

请尝试以下操作：

1. 将您的值增加到border-radius: 2%更高的值。可以说border-radius: 50%
2. 添加overflow: hidden;到您的checkListTileGreen班级