如何在 React Native for android 中塑造阴影？答案

【问题标题】：How to shape shadows in React Native for android?如何在 React Native for android 中塑造阴影？
【发布时间】：2021-11-11 18:53:31
【问题描述】：

使用的包： react-native-shadow

问题：如果视图是圆形的，如何塑造阴影？我使用了 Avatar，并希望在它后面有相同形状的阴影。

使用的代码：

<BoxShadow setting={{
    width: 90,
    height: 90,
    color: "#000",
    radius: 20,
    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>

已尝试的解决方案：我尝试将半径设置为 44、48，但在 50 后出现错误如果有人能给出原因会很棒。

电流输出： Click Here: Shadow Shape is rectangular

预期输出： Click Here: Shadow Shape is circular and blurred

【问题讨论】：

你能保持半径：45 & Avatar size={80}。或者让我知道您在这里使用了哪个 Avatar 模块。
保持半径 45 只会使其接近圆形，但不是完美的圆形 & Avatar size={80} 只会减小其大小。我在 "react-native-elements": "^3.4.2" 包中使用了 Avatar

标签： react-native

【解决方案1】：

请在您的代码中添加并尝试：

<BoxShadow
  setting={{
    width: 90,
    height: 90,
    border: 10,   //Add this
    color: '#8d1622',
    radius: 45,   //Change here
    opacity: 1,   //Change here
    x: 0,   //Change here
    y: 0,   //Change here
    style: { marginVertical: 7 },
  }}>
  <Avatar
    size={90}
    overlayContainerStyle={{ backgroundColor: '#bf1e2e' }}
    rounded
    title="GS"
    onPress={() => console.log('Works!')}
    activeOpacity={0.7}
  />
</BoxShadow>

【讨论】：

辛苦了，谢谢！！
欢迎。如果您找到解决方案，请投票给我的答案。
我试过 Reputation 应该超过 15。
不用担心。祝你未来一切顺利。