如何在React Native中对图像添加阴影

Question

我需要在图像周围添加阴影，我的图像是一个矩形区域，我需要在该矩形区域周围添加阴影。

我想要做的事情如下：stackoverflow问题

我想知道如何在React Native中实现这一目标，可适用于Android和iOS。

- nadeshoki

Answer 1

Shadow 只适用于 iOS。对于 Android，您需要使用 Elevation。您可以尝试以下代码，我目前在使用它，表现良好：

elevationLow: {
    ...Platform.select({
    ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 2,    
    },
    android: {
        elevation: 5,
    },
    }),
},

- sebastianf182

---

发布你的代码，特别是你的样式。你必须有第二个视图来清除你的样式。在RN中，它们不会被继承。 - sebastianf182

但是针对 <Image /> 组件，不适用于“elevation”（抬高）属性。 - Vincent Decaux

@VincentDecaux 你可能需要使用一个包装器并提升图像所在的视图。 - sebastianf182

你不需要使用 platform.select。 - Steve Moretz

非常好的分享！！如果您想要获取所需阴影体积的确切代码基础，也可以关注此链接https://ethercreative.github.io/react-native-shadow-generator/。 - Micessien

Answer 2

将您的Image包装在View内（以获得语义清晰度），然后定义以下样式规则到View中：

shadow: {
  shadowColor: '#202020',
  shadowOffset: {width: 0, height: 0},
  shadowRadius: 5,
},

我在这里制作了一个示例：https://snack.expo.io/rJesdOgRZ。但目前“snack”非常缓慢，很难检查实际结果。但至少代码是可见的并且作为基准运行。

- Samuli Hakoniemi

---

在安卓上它不起作用，我只是按照你建议的做了。 - nadeshoki

Answer 3

您可以使用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>

- Ryan Turnbull

---

你好！请查看如何接受答案。 - Ryan Turnbull

阴影样式属性仅适用于iOS，对于Android，您可以使用高程样式属性，并提供从1到所需的任何整数值。 - Prince

elevation属性仅适用于Android 5.0或更高版本，所以请确保。 - Prince

我正在使用5.0及以上版本。 - nadeshoki

Answer 4

我发现的另一个最简单和最好的选择是使用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>
}

如上所示的示例代码中，您只需将所有内容（图像、文本、视图或任何其他React Native组件）包装在标签内即可添加阴影。无需像在React Native阴影选项中那样进行任何手动样式设置。如果您浏览他们的文档，您可以找到许多属性，您可以有效地利用这些属性来自定义应用于组件的阴影。

- Pawara Siriwardhane