如何更改视图的外部颜色/阴影？

Question

我正在尝试制作一个图像选择器。 我有 2 个观点。

<View className="flex-1 w-full h-full relative items-center justify-center">
  <View style={{
    height: 300,
    width: "full",
    position: "absolute"
  }}></View>
</View>

我希望内部视图在其外部投射阴影，如图所示。我尝试使用阴影，但似乎不起作用。 在反应中我有

box-shadow: 0 0 0 9999px #ffffff77;

但我不知道如何在react-native中实现这一点。

Answer 1

react-native 中没有

box-shadow

。您可以使用

elevation

来表示盒子阴影。

shadowClass: {
    shadowColor: '#ffffff77', // For ios
    shadowOffset: { width: 0, height: 0 }, // For ios
    shadowOpacity: 0.8, // For ios
    shadowRadius: 10,  // For ios
    elevation: 5 // For android
}

参考

https://reactnative.dev/docs/view-style-props#elevation-android