React Native 中的提升答案

【问题标题】：Elevation in React NativeReact Native 中的提升
【发布时间】：2019-05-07 21:47:38
【问题描述】：

这是我在 React-Native 屏幕中定义的样式。我用过elevation 属性来实现盒子阴影。但它不能正常工作。

const styles = StyleSheet.create({
scrollContainer: {
    flex: 1,
},
container: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap",
    padding: 2
},
box: {
    margin: 8,
    width: Dimensions.get('window').width / 2 - 18,
    height: Dimensions.get('window').width / 2 - 18,
    justifyContent: "center",
    alignItems: "center",
    borderStyle: 'dashed',
    borderLeftWidth: 1,
    borderTopWidth: 1,
    borderRightWidth: 1,
    borderBottomWidth: 1,
    borderTopColor: 'black',
    borderBottomEndRadius : 8,
    borderTopStartRadius: 8,
    borderTopEndRadius: 8,
    borderBottomStartRadius: 8,
    borderBottomLeftRadius:8,
    borderBottomRightRadius:8,
    elevation: 5
},
navBar:{
    backgroundColor: "#000",
}
});

我也尝试过使用 box-shadow，但出现了同样的问题。

【问题讨论】：

您是否尝试过指定shadowColor: Colors.BLACK, shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.16, shadowRadius: 16？值显然是随机的 :)

标签： css react-native border shadow elevation

【解决方案1】：

尝试将以下属性添加到styles.box。您可以更改这些值以获得更好的结果。

// ...
box: {
  // ...
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.5,
  shadowRadius: 2,
  elevation: 2,
},
// ...

【讨论】：

【解决方案2】：

你可以使用下面的代码

          height: 150,
          width: '100%',
          backgroundColor: 'white',
          elevation: 5,
          shadowColor: '#000',
          shadowOffset: {width: 0, height: 0},
          shadowOpacity: 0.1,
          shadowRadius: 5,

【讨论】：

【解决方案3】：

经过一番调查，我找到了可行的解决方案，就在这里。在github issue 上有关于这个问题的广泛讨论。

box: {
    margin: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 2,
}

而只使用海拔属性。此外，请确保为框提供适当的边距以获得适当的间距。在我的情况下，我缺乏边际。希望有用的发现对您有所帮助。

【讨论】：

【解决方案4】：

您可以在视图中添加此样式

 headerstyle:{
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 2,
    alignSelf: 'stretch'
},

【讨论】：

阴影属性除了高程和阴影颜色外没有影响