如何解决React Native需要在圆形按钮上渲染圆形阴影
我需要在圆形按钮上渲染圆形阴影。阴影应该像图像中所给定的那样渲染,但是有些我却无法那样地渲染。
但是它不能正确呈现,并且显示如下。
它看起来像下面
样式将是这样
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,}} source={require('../images/instagram.png')} />
</View>
解决方法
您可以尝试将图像放置在视图中吗?从图像中删除阴影样式并将其放置到视图中。就我而言,这是可行的。
<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,borderRadius: 30 }} />
</View>
别忘了将需求添加回Image组件
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。