Shadow

为View添加阴影样式。

基本用法

import {Shadow} from 'react-native-maui';

<Shadow shadowWidth={15}>
  <View style={{ 
    width: 100, height: 100, backgroundColor: 'white',
  }}>
    <Text></Text>
  </View>
</Shadow>
<Shadow borderRadius={30} shadowWidth={15}>
  <View style={{ 
    width: 100, height: 100, backgroundColor: 'white', borderRadius: 30,
  }} />
</Shadow>
<Shadow borderRadius={50} shadowWidth={15}>
  <View style={{ 
    width: 100, height: 100, backgroundColor: 'white', borderRadius: 50,
  }} />
</Shadow>

自定义样式

import {Shadow} from 'react-native-maui';

<Shadow borderRadius={30} shadowWidth={15} color="#f7da94">
  <View style={{ 
    width: 100, height: 100, backgroundColor: '#f9d27d', borderRadius: 30,
  }} />
</Shadow>
<Shadow borderRadius={30} shadowWidth={30} color="#eea6b7">
  <View style={{ 
    width: 60, height: 60, backgroundColor: '#e9ccd3', borderRadius: 50,
  }} />
</Shadow>

属性

名称	描述	类型	默认值
borderRadius	阴影的圆角大小	number	0
color	阴影的颜色	string	#F8F8F8
shadowWidth	阴影的宽度	number	15
stopOpacity	阴影的渐变结束透明度	number	1