[英]How can I set elevation shadow only on the bottom on react native?
I'm trying to add a shadow on the bottom of a view, but I don't how to do it on Android.我正在尝试在视图底部添加阴影,但我不知道如何在 Android 上执行此操作。 With
elevation
it put a shadow also on the top.随着
elevation
的升高,它也会在顶部产生阴影。 Is there a way to do it like on iOS?有没有办法像在 iOS 上那样做?
Here's my code:这是我的代码:
export function makeElevation(elevation) {
const iosShadowElevation = {
shadowOpacity: 0.0015 * elevation + 0.18,
shadowRadius: 0.5 * elevation,
shadowOffset: {
height: 0.6 * elevation,
},
};
const androidShadowElevation = {
elevation,
};
return Platform.OS === 'ios' ? iosShadowElevation : androidShadowElevation;
} }
left: iOS (expected)左:iOS(预期)
right: Android右:安卓
EDIT: The only "fake" solution I found is to use react-native-linear-gradient
instead to create a custom shadow.编辑:我发现的唯一“假”解决方案是使用
react-native-linear-gradient
来创建自定义阴影。
You can use overflow: 'hidden'
to achieve the desired result without having to install a library.您可以使用
overflow: 'hidden'
来实现所需的结果,而无需安装库。
wrap the view in a parent view and set the parent's overflow to hidden and apply a padding only on the side where you want your shadow to appear like so:将视图包装在父视图中,并将父视图的溢出设置为隐藏,并仅在您希望阴影出现的一侧应用填充,如下所示:
<View style={{ overflow: 'hidden', paddingBottom: 5 }}>
<View
style={{
backgroundColor: '#fff',
width: 300,
height: 60,
shadowColor: '#000',
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.4,
shadowRadius: 3,
elevation: 5,
}}
/>
</View>
here's a custom component that you can use:这是您可以使用的自定义组件:
import React from 'react'
import { View, StyleSheet, ViewPropTypes } from 'react-native'
import PropTypes from 'prop-types'
const SingleSidedShadowBox = ({ children, style }) => (
<View style={[ styles.container, style ]}>
{ children }
</View>
);
const styles = StyleSheet.create({
container:{
overflow: 'hidden',
paddingBottom: 5,
}
});
SingleSidedShadowBox.propTypes = {
children: PropTypes.element,
style: ViewPropTypes.style,
};
export default SingleSidedShadowBox;
example:例子:
<SingleSidedShadowBox style={{width: '90%', height: 40}}>
<View style={{
backgroundColor: '#fff',
width: '100%',
height: '100%',
shadowColor: '#000',
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.4,
shadowRadius: 3,
elevation: 5,
}} />
</SingleSidedShadowBox>
you can adjust the padding depending on your shadow您可以根据阴影调整填充
Unfortunately RN don't support it by default, check blow link https://ethercreative.github.io/react-native-shadow-generator/不幸的是 RN 默认不支持,查看链接https://ethercreative.github.io/react-native-shadow-generator/
Answers above are quite helpful but the workaround that worked best for me is by wrapping both, 1-The component dropping the shadow and 2-The component the shadow is being dropped on in a component with the style rule overflow: "hidden"
上面的答案非常有帮助,但对我来说最有效的解决方法是包装两者, 1-投下阴影的组件和2-在样式规则
overflow: "hidden"
Example:例子:
function SomeScreen (){
return (
<View style={{overflow: "hidden"}}/*Top shadow is hidden*/>
<NavBar style={styles.shadow}/*The component dropping a shadow*/ />
<ProductList /*The component under the shadow*/ />
</View>
);
}
const styles = StyleSheet.create({
shadow: {
shadowColor: "black",
shadowOffset: { width: 0, height: 4 },
shadowRadius: 6,
shadowOpacity: 0.2,
elevation: 3,
}
});
Just append/put this to main view container:只需将其附加/放入主视图容器:
const styles = StyleSheet.create({
container: {
...Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: {width: 1, height: 3},
shadowOpacity: 0.4,
},
android: {
elevation: 4,
},
}),
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.