React Native 需要在圆形按钮上渲染圆形阴影
React native need to render rounded shadow on rounded button
我需要在圆形按钮上渲染圆形阴影。阴影应该像图像中给出的那样渲染,但有些我无法像那样渲染。
但是渲染不正确,显示如下。
看起来像下面
风格会是这样
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
<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>
你能试着把你的图像放在一个视图中吗?从图像中移除阴影样式并将其放置到视图中。就我而言,这是有效的。
<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>
不要忘记将要求添加回图像组件
我需要在圆形按钮上渲染圆形阴影。阴影应该像图像中给出的那样渲染,但有些我无法像那样渲染。
但是渲染不正确,显示如下。
看起来像下面
风格会是这样
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
<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>
你能试着把你的图像放在一个视图中吗?从图像中移除阴影样式并将其放置到视图中。就我而言,这是有效的。
<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>
不要忘记将要求添加回图像组件