如何在react native上仅在底部设置仰角阴影？
如何在react native上仅在底部设置仰角阴影？
提问于 2019-02-19 00:44:18
我试图在视图的底部添加阴影，但我不知道如何在Android上做到这一点。对于elevation，它也在顶部放置了一个阴影。有没有办法像在iOS上那样做呢？
下面是我的代码：
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;}
左: iOS (预期)
右图: Android
编辑:我找到的唯一“假的”解决方案是使用react-native-linear-gradient来创建自定义阴影。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-02-13 04:03:39
您可以使用overflow: 'hidden'来获得所需的结果，而无需安装库。
将视图包装在父视图中，并将父视图的溢出设置为隐藏，并仅在希望阴影出现的一侧应用填充，如下所示：
<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>结果：
下面是一个您可以使用的自定义组件：
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;示例：
<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>您可以根据您的阴影调整填充
Stack Overflow用户
发布于 2019-10-17 14:58:01
遗憾的是，RN在默认情况下不支持它，请检查blow链接https://ethercreative.github.io/react-native-shadow-generator/
但是你可以使用像this这样的npm包
Stack Overflow用户
发布于 2020-08-10 21:17:40
上面的答案非常有帮助，但对我来说效果最好的变通方法是将这两个组件都包装起来，1-放置阴影的组件，2-将阴影放置在上的组件，使用样式规则overflow: "hidden"
示例：
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,
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54751815
复制相关文章
相似问题
腾讯云开发者
