React native 反应本机阴影不出现

我试图在我的视图下方找到一个阴影，从我在网上发现的情况来看，应该很简单：

shadowOffset:{宽度：10，高度：10}，
阴影颜色：“黑色”，
阴影不透明度：1.0，

但问题是阴影根本没有出现

这是我的部件

直播

在我的样式表中：

const styles=StyleSheet.create({
影子：{
阴影偏移：{宽度：10，高度：10}，
阴影颜色：“黑色”，
阴影不透明度：1.0
},

---

有什么原因吗？或者我错过了什么？

影子在IOs上工作吗？ 安卓和IOS的工作≠ 在React Native中。对于android，它与

---

否则，请尝试为阴影组件设置背景色：）

对于iOS，请提高外部

的

zIndex

---

我也希望在我的Android应用程序中在我的视图下方有一个阴影。所以我发现的窍门是：

对于IOS:

const styles = StyleSheet.create({
    shadow: {
      shadowOffset: { width: 0, height: 2 },
      shadowColor: '#000',
      shadowOpacity: 0.2
    }
});

const styles = StyleSheet.create({
    shadow: {
        elevation: 5
    }
});

对于安卓系统：

const styles = StyleSheet.create({
    shadow: {
      shadowOffset: { width: 0, height: 2 },
      shadowColor: '#000',
      shadowOpacity: 0.2
    }
});

const styles = StyleSheet.create({
    shadow: {
        elevation: 5
    }
});

---

如果您正在处理UI元素，我建议您查看一下该站点。就样式而言，它们使生活变得轻松。

边界半径和阴影的解决方案

        <View style={{backgroundColor: '#000', ...shadow}}>
          <View style={{overflow: "hidden", borderRadius: 10}}>
            <VideoPlayer
                ...
                />
          </View>
        </View>

---

正如一些评论所指出的，如果您需要

溢出：“隐藏”

，您就有点为难了。 （例如，对于具有圆形边缘和全出血图像的卡。）

一种简便的方法是在未设置

backgroundColor

的父容器中添加阴影。这是由于该问题导致子视图继承没有背景的父视图的阴影。（当它影响多个子视图时，可能看起来很奇怪。）

• 添加带有阴影&no

  backgroundColor

  set的父容器
• 使用

  背景色创建一个子视图

---

我解决了这个问题，在我应用阴影的

图像的样式属性中添加了
溢出：“可见”

image: {
    overflow: 'visible',
    width: 300,
    height: 200,
    borderRadius: 4,
    shadowOffset: { width: 0, height: 2 },
    shadowColor: '#000',
    shadowOpacity: 0.2
  }

阴影在React Native中工作。您所要做的就是将标高增加到更高的值。并且确保父容器上没有隐藏的溢出，因为它覆盖了额外的部分。
下面是阴影渲染的最低代码。只要高程值正确，它就可以正常工作

shadowColor: 'black',
shadowOpacity: 1,
elevation: 12,

我现在无法在iOS上测试，所以我不确定。不幸的是，提升也不起作用。不确定你在阴影组件中添加背景色是什么意思，这会不会使整个组件变为该颜色，因为它将所有组件都包裹在其中？| |你必须设置背景色才能启用提升。它将l是整个图形的颜色，但您可以为子视图设置另一种颜色：）@Eran感谢您的提示。删除溢出：隐藏使阴影显示。我已经在iOS图形中编程多年，可能有一个答案。视图在其边框处剪裁，因此要使阴影显示，您通常必须使用子视图，关闭pa上的剪裁租用包含阴影的视图，但在没有阴影的视图中继续剪切。这是因为阴影半径超出了剪切边界。这对React团队来说可能是一个相当大的挑战，因为至少在我的情况下，它的行为不符合要求。如果阴影忽略或不忽略剪切，则会产生副作用你没有提到你正在破坏的阴影（…阴影）中的东西
shadowColor: 'black',
shadowOpacity: 1,
elevation: 12,