如何在 react-native 中在图像周围添加阴影答案

【问题标题】：how to add shadow around the image in react-native如何在 react-native 中在图像周围添加阴影
【发布时间】：2018-04-08 19:59:18
【问题描述】：

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

我想做这样的事情：stackoverflow question

我想知道如何在适用于 android 和 ios 的 react native 中做到这一点

【问题讨论】：

标签： react-native

【解决方案1】：

Shadow 仅适用于 iOS。对于 Android，您需要 Elevation。你可以做这样的事情。我目前使用它并且工作正常：

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

【讨论】：

发布您的代码，特别是您的样式。您必须有第二个视图来清除您的样式。在 RN 中，它们不会被继承。
但是高程不适用于组件
@VincentDecaux 您可能必须使用包装器并提升图像所在的视图。
你不需要使用platform.select。
大分享！！另外，如果您想获得所需阴影量的确切代码库，可以点击此链接ethercreative.github.io/react-native-shadow-generator 获取代码

【解决方案2】：

将Image 包裹在View 中（为了语义清晰），然后为视图定义以下样式规则：

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

我在这里做了一个例子：https://snack.expo.io/rJesdOgRZ。但是 atm "snack" 太慢了，以至于很难检查实际结果。但至少代码是可见的，可以作为基准。

【讨论】：

它在android中不起作用我只是按照你的建议

【解决方案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>

【讨论】：

欢迎您！见How to accept an answer
Shadow 样式道具仅适用于 ios，对于 android，您可以使用海拔样式道具，并且您可以根据需要提供从 1 到依此类推的任何整数值。
elavtion prop只适用于android 5.0或以上版本，请放心
我使用的是5.0及以上版本