响应本机-操作视图以将阴影应用于图像的BorderRadius吗? [英] React Native - manipulate View to apply shadow to Image's BorderRadius?

问题描述

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

Having some styling issues on React Native with Shadows.

我只想在图像上获得阴影，该图像具有与我给定的borderradius弯曲的边缘(而不是正方形).但是，如果我在父视图上应用阴影，它似乎无法跟随图像的边缘".我希望阴影位于图像的弯曲边缘周围，而不是方形视图周围.

I'd like to get a shadow on just the image, which has curved edges (not a square) with the borderradius I've given it. But if I apply a shadow on the parent View, it can't seem to 'follow the edges' of the Image. I'd like for the shadow to be around the curved edges of the Image, not around the square view.

这是我的代码:

  <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 )中，但这会完全隐藏整个阴影.

I thought perhaps adding overflow hidden to the parent View's styling (closedcontainer) would do it, but that gets hides the whole shadow altogether.

有什么想法吗?谢谢！

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

UPDATE: per suggestion, tried setting the borderRadius directly in the , unfortunately still no luck.

推荐答案

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

Try setting borderRadius directly as a prop on the image instead using it as a style.

<Image borderRadius={25}/>

或类似

这篇关于响应本机-操作视图以将阴影应用于图像的BorderRadius吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！