[英]how to fix shadow problem with elevation in react-native for android
I'm trying to show shadow around a view in react-native.我正在尝试在 react-native 中显示视图周围的阴影。
I tried this我试过这个
<View
style={{
flex: 0.3,
margin: 4,
...Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: {width: 0, height: 4},
shadowOpacity: 0.4,
},
android: {
elevation: 2,
},
}),
}}>
it works perfectly on iOs but on android it has no effect.它在 iOs 上完美运行,但在 android 上它没有效果。 there is a library called react-native-shadow which work perfectly on both iOs and android, but how to fix shadow problem in android with out using any third party libraries.
有一个名为 react-native-shadow 的库,它在 iOs 和 android 上都可以完美运行,但是如何在不使用任何第三方库的情况下修复 android 中的阴影问题。
right now I have these properties that I have given me a work around for the required animation .现在我有这些属性,我已经为所需的动画提供了解决方法。 try this and lemme know in comments that if it helps you in your case.
试试这个,让我在评论中知道如果它对你有帮助。 happy to help.
很高兴能帮助你。
...Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 3 },
shadowOpacity: 0.2,
},
android: {
elevation: 0.4,
// bottomElevation:4,
borderBottomWidth: 0.2,
borderTopWidth:0.2,
borderColor:'#000'
},
}),
Currently, I'm using the following properties to handle shadow on both IOS and Android platforms.目前,我正在使用以下属性来处理 IOS 和 Android 平台上的阴影。
<View
style={{
height: 200,
width: 350,
borderRadius: 4,
margin: 5,
shadowColor: 'rgba(0,0,0,0.5)',
shadowOffset: {width: 0, height: 5},
shadowOpacity: 2,
shadowRadius: 2,
elevation: 4,
backgroundColor: '#fff',
}}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.