React Native 需要在圆形按钮上渲染圆形阴影答案

【问题标题】：React native need to render rounded shadow on rounded buttonReact Native 需要在圆形按钮上渲染圆形阴影
【发布时间】：2020-09-21 10:09:02
【问题描述】：

我需要在圆形按钮上渲染圆形阴影。阴影应该像图像中给出的那样渲染，但有些我无法像那样渲染。

但它没有正确渲染并显示如下。

如下图

样式会是这样的

const styles = StyleSheet.create({
  buttonStyle : {
    height: 60,
    width: 60, 
    marginRight: 15,
    shadowColor: "#4e4f72",
    shadowOpacity: 0.2,
    shadowRadius: 30,
    shadowOffset: {
      height: 0,
      width: 0
    },
    borderRadius: 30,
    elevation: 30,
  },
})

视图样式

    <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 15 }}>
    
       <Image style={styles.buttonStyle} source={require('../images/google.png')} />
    
       <Image style={styles.buttonStyle} source={require('../images/facebook.png')} />
    
       <Image style={{ height: 60, width: 60, }} source={require('../images/instagram.png')} />
    
    </View>

【问题讨论】：

你能告诉我们你应用 buttonStyle 对象的视图的代码吗？
@realarb 问题已编辑

标签： react-native shadow react-native-stylesheet

【解决方案1】：

你能试着把你的图片放在一个视图里吗？从图像中移除阴影样式并将其放置到视图中。就我而言，这是可行的。

  <View
    style={{
      height: 60,
      width: 60,
      marginRight: 15,
      shadowColor: '#4e4f72',
      shadowOpacity: 0.2,
      shadowRadius: 30,
      shadowOffset: {
        height: 0,
        width: 0,
      },
      borderRadius: 30,
      elevation: 30,
      alignItems: 'center',
      justifyContent: 'center',
    }}
  >
    <Image style={{ height: 60, width: 60, borderRadius: 30 }} />
  </View>

不要忘记将 require 添加回 Image 组件

【讨论】：