Question

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

我想知道如何在本机中做到这一点，这可以适用于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

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

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

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

Answer 3

您可以为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>

如何在react-native

3 个答案: