React native 如何在react native中为图像添加阴影

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

我想这样做：

---

我想知道如何在既适用于android又适用于ios的react native中实现这一点

您可以使用

shadow

样式道具来实现这一点。你会想要

shadowOffset

=采用

高度

和（可选，我不太喜欢使用它，但是）

宽度

值在这些方向上移动阴影

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>

//内容

将您的

图像

包装在

视图中

（为了语义清晰），然后为视图定义以下样式规则：

---

我在这里举了一个例子：。但是自动取款机的“快餐”速度太慢，以至于很难检查实际结果。但至少代码是可见的，并且可以作为基准。

Shadow仅适用于iOS。对于Android，您需要提升。你可以这样做。我目前使用它，效果很好：

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

---

欢迎光临！请参阅阴影样式道具仅适用于ios，对于android，您可以使用立面样式道具，并根据需要提供从1到等的任何整数值。elavtion道具仅适用于android版本5.0或更高版本，请放心。我使用的是5.0或更高版本。它不适用于android。我只是按照您的建议发布了代码，特别是你的风格。必须有第二个视图正在清除样式。在RN中，它们不是继承的。但高程不适用于component@VincentDecaux您可能需要使用包装器并提升映像所在的视图。您不需要使用platform.select。

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