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

Question

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

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

它看起来像这样：

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

borderWidth: 1,
borderColor: 'white',

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

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

Answer 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

Answer 2

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

Answer 3

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

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

Problem with Shadow or Elevation in React-Native

styles

shadow

react-native

react-native-android

示例代码的结果