React Native安卓端如何用react-native-shadow为圆形Avatar生成匹配形状的阴影

问题原因 #

radius超过阈值报错是react-native-shadow库的内置限制：该库的阴影radius参数最大允许值为阴影容器宽/高的1/2，你当前设置的阴影容器宽高都是90，因此radius的最大值为45，超过该数值就会触发内部计算逻辑报错。你之前配置的radius=20远小于圆形所需的圆角值，所以阴影呈现为矩形，和圆形Avatar不匹配。

可行解决方案 #

方案1：继续使用react-native-shadow库 #

直接将配置中的radius参数调整为45即可实现和圆形Avatar匹配的阴影效果，调整后代码如下：

<BoxShadow setting={{
    width: 90,
    height: 90,
    color: "#000",
    radius: 45,
    opacity: 0.1,
    x: 2,
    y: 3,
    style: { marginVertical: 7 }
}}>
    <Avatar size={90} overlayContainerStyle={{ backgroundColor: '#bf1e2e' }} rounded title="GS" onPress={() => console.log("Works!")} activeOpacity={0.7} />
</BoxShadow>

方案2：使用React Native原生阴影属性（更推荐，无需额外依赖） #

react-native-shadow本身是为了兼容早期Android版本的阴影效果做的封装，目前React Native原生的阴影属性已经可以覆盖绝大多数场景，直接给Avatar添加样式即可实现需求，代码如下：

import { Platform } from 'react-native';

// 组件代码
<Avatar 
    size={90} 
    overlayContainerStyle={{ 
        backgroundColor: '#bf1e2e',
        // iOS 阴影配置
        shadowColor: '#000',
        shadowOffset: { width: 2, height: 3 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        // Android 阴影配置
        elevation: 4,
        overflow: Platform.OS === 'android' ? 'hidden' : 'visible'
    }} 
    rounded 
    title="GS" 
    onPress={() => console.log("Works!")} 
    activeOpacity={0.7} 
/>

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