React-Native 中的阴影或高程问题答案

【问题标题】：Problem with Shadow or Elevation in React-NativeReact-Native 中的阴影或高程问题
【发布时间】：2021-08-01 12:29:59
【问题描述】：

我在向视图组件添加阴影时遇到问题。这是样式对象：

header: {
        width: '95%',
        height: '15%',
        marginTop: 50,
        alignSelf: 'center',
        borderRadius: 20,
        justifyContent: 'center',
        flexDirection: 'row',
        paddingHorizontal: 10,
        elevation: 2,
    },

它看起来像这样：

一旦我添加了这些样式属性：

borderWidth: 1,
borderColor: 'white',

看起来更好但不是最好的方法：

我的问题是什么？你能帮我吗？

【问题讨论】：

您想实现什么？你能展示一张你想模仿的影子的图片吗？
另外，您能否向我们提供其余的组件代码。这将使我们更深入地了解到底出了什么问题。
尝试将backgroundColor: "white" 属性赋予View 样式。

标签： react-native styles react-native-android shadow

【解决方案1】：

如果您想为<View/> 组件添加阴影，我建议您使用shadow props。您可以使用样式属性为视图组件添加阴影，如下所示：

// Just picked some random values for each of the properties.

const styles = StyleSheet.create({
  header: {
    shadowOffset: {
      width: 20,
      height: 10
     },
     shadowOpacity: 0.2,
     shadowRadius: 20
  },
});

示例代码结果

我无法仅使用您提供的代码复制您显示的样式。所以我无法回答为什么添加borderWidth 和borderColor 属性会改变你的阴影。如果您希望我深入研究，请提供整个组件的代码，或者更好的是 Expo snack。

我注意到的是您使用了elevation 样式属性，它只会在Android (source) 上添加阴影。此外，此属性还会影响重叠视图的 z 顺序，因此如果仅用于阴影，我建议不要使用此属性。

Expo Snack Demo

【讨论】：

好吧。问题是我忘了添加背景颜色。这解决了问题。感谢@Ajay。 shadow*: 样式仅适用于 iPhone。而且由于我正在对 Android 应用程序进行编程，因此 Elevation 就足够了。 ??

【解决方案2】：

BackgroundColor:white 解决了这个问题，感谢@Ajay

【讨论】：

【解决方案3】：

使用 backgroundColor:'white' 解决了问题

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。