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

Question

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

我想做这样的事情:stackoverflow问题

我想知道如何在本机做反应,这可以适用于android和ios

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,
            },
          }),
        },

Answer 2

您可以使用shadow样式道具View来实现这一点。你会想要

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>

Answer 3

包装您的Image内部View（为了语义清晰），然后为View定义以下样式规则：

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

我在这里举了一个例子：https : //snack.expo.io/rJesdOgRZ。但是atm“小吃”是如此缓慢，以至于很难检查实际结果。但是至少该代码是可见的，并且可以作为基准。