React Native 阴影效果双平台实现, 安卓端引用'react-native-shadow'第三方依赖实现,ios端使用api提供的属性即可。
(更好的方式可以用阴影底图让UI提供,据了解通过style设置阴影属性较消耗渲染性能)
部分实现代码:(效果按自己需求调整)
import {BoxShadow} from 'react-native-shadow';
Shadow = props => {
const {width, height} = props;
return IS_ANDROID ? (
<BoxShadow
setting={{
width: width,
height: height + 6,
color: '#000',
border: 2,
radius: 3,
opacity: 0.02,
x: 3,
y: 0,
style: {marginVertical: 0, justifyContent: 'center'},
}}>
{props.children}
</BoxShadow>
) : (
<View
style={{
backgroundColor: 'white',
shadowColor: '#000000',
shadowOffset: {h: 10, w: 10},
shadowRadius: 5,
shadowOpacity: 0.1,
}}>
{props.children}
</View>
);
};
使用方式:
<Shadow width={200} height={100}>
<View
style={{
width: 200,
height: 100,
backgroundColor: '#FFF',
}}>
{/**自定义布局内容*/}
</View>
</Shadow>
---------------------
作者:aijason
来源:CSDN
原文:https://blog.csdn.net/u010379595/article/details/81561247
版权声明:本文为博主原创文章,转载请附上博文链接!