我需要在图像周围添加阴影,我的图像是一个矩形区域,我需要在该矩形区域周围添加阴影。
我想要做的事情如下:stackoverflow问题
我想知道如何在React Native中实现这一目标,可适用于Android和iOS。
我需要在图像周围添加阴影,我的图像是一个矩形区域,我需要在该矩形区域周围添加阴影。
我想要做的事情如下:stackoverflow问题
我想知道如何在React Native中实现这一目标,可适用于Android和iOS。
Shadow 只适用于 iOS。对于 Android,您需要使用 Elevation。您可以尝试以下代码,我目前在使用它,表现良好:
elevationLow: {
...Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
},
android: {
elevation: 5,
},
}),
},
将您的Image
包装在View
内(以获得语义清晰度),然后定义以下样式规则到View中:
shadow: {
shadowColor: '#202020',
shadowOffset: {width: 0, height: 0},
shadowRadius: 5,
},
我在这里制作了一个示例:https://snack.expo.io/rJesdOgRZ。但目前“snack”非常缓慢,很难检查实际结果。但至少代码是可见的并且作为基准运行。
View
的shadow
样式属性来实现这一点。您将需要:
shadowOffset
= 采用height
和(可选的,我不太喜欢使用它)width
值来沿这些方向移动阴影。
shadowColor
= 采用颜色,类似于backgroundColor
,表示阴影的颜色。
shadowRadius
= 采用一个值,将指示阴影距离视图的远近。
shadowOpacity
= 取值范围从0到1,表示阴影的强度。<View style = {{
position: 'absolute', top: 50, left: 50,
backgroundColor: 'red', width: 100, height: 100, borderRadius: 50,
shadowColor: "black",
shadowOffset: { height: 2},
shadowOpacity: 0.3,
}}>
//CONTENT
</View>
我发现的另一个最简单和最好的选择是使用react-native-shadow-2以及react-native-svg。在这里,我们需要安装react-native-svg,因为react-native-shadow-2依赖于react-native-svg。
基本阴影
import { Shadow } from 'react-native-shadow-2';
export default const ImageWithShadow = () => {
<Shadow>
<Image style={styles.imageStyles} source={ImageSource} />
</Shadow>
}
高级阴影样式
import { Shadow } from 'react-native-shadow-2';
export default const ImageWithShadow = () => {
<Shadow startColor='#00000020' distance=10 radius=5 size=20>
<Image style={styles.imageStyles} source={ImageSource} />
</Shadow>
}