react-native - React Native 需要在圆形按钮上渲染圆形阴影

Question

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

但它不能正确渲染并显示如下。

它看起来像下面

风格会是这样

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>

Answer 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 组件