React Native - 操纵 View 将阴影应用到 Image 的 BorderRadius?

IT技术 css reactjs react-native
2021-05-01 20:12:31

在 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,不幸的是仍然没有运气。 在此处输入图片说明

1个回答

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

<Image borderRadius={25}/>

或类似的