js
yarn add react-native-shadow
yarn add react-native-svg // 这个是必须的,阴影依赖这个包
四周都有阴影,如下设置
js
import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {BoxShadow} from 'react-native-shadow';
const App = () => {
const shadowOpt = {
width: 168, // 与子元素高一致
height: 168, // 与子元素宽一致
color: '#000', // 阴影颜色
border: 7, // 阴影宽度
radius: 10, // 与子元素圆角一致
opacity: 0.45, // 透明
x: 0, // 偏移量
y: 0,
style: {marginVertical: 5},
};
return (
<View style={{marginLeft: 100}}>
<BoxShadow setting={shadowOpt}>
<View style={{width: 168, height: 168, backgroundColor: '#FFF'}}>
<Text>111</Text>
</View>
</BoxShadow>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
},
});
export default App;