React Native - 操作视图以将阴影应用于图像的 BorderRadius？答案

【问题标题】：React Native - manipulate View to apply shadow to Image's BorderRadius?React Native - 操作视图以将阴影应用于图像的 BorderRadius？
【发布时间】：2018-03-10 23:25:18
【问题描述】：

在 React Native with Shadows 上存在一些样式问题。

我想只在图像上添加阴影，该图像具有弯曲的边缘（不是正方形）以及我给它的边界半径。但是，如果我在父视图上应用阴影，它似乎无法“跟随图像的边缘”。我希望阴影在图像的弯曲边缘周围，而不是在方形视图周围。

这是我的代码：

  <View style={[styles.closedcontainer]}>
    <Image source={{uri: props.food.url}}
           style={styles.smallimage}
      />
  </View>

这是我的样式：

const styles = StyleSheet.create({
  closedcontainer: {
      height: 100,
      width: 100,
      flexDirection: 'row',
      flexWrap: 'wrap',
      paddingLeft: 50,
      paddingRight: 50,
      paddingBottom: 0,
      paddingTop: 0,
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#fff9f9',
    shadowColor: 'black',
    shadowOffset: {width: 2, height: 5},
    shadowOpacity: .30,
    shadowRadius: 5,
    // overflow: 'hidden'
  },
  smallimage: {
      height: 100,
      width: 100,
      borderRadius: 30,
      borderColor: "#f97070",
      borderWidth: 2.75,
      margin: 10,
      backgroundColor: 'white',
      resizeMode: 'contain'
  }

我认为也许将溢出隐藏添加到父视图的样式 (closedcontainer) 会做到这一点，但这会完全隐藏整个阴影。

有什么想法吗？谢谢！

更新：根据建议，尝试直接在中设置borderRadius，不幸的是仍然没有运气。

【问题讨论】：

标签： css reactjs react-native

【解决方案1】：

尝试将borderRadius直接设置为图像上的道具，而不是将其用作样式。

<Image borderRadius={25}/>

或类似

【讨论】：

啊。我的错。您需要将borderRadius 添加到正方形。这样阴影就会跟着来。或者你真的想要一个正方形和一个圆形的图像在上面？如果是这样，那么您将阴影添加到盒子而不是图像。
将它作为道具添加到视图容器中就可以了！谢谢！