Question

这是我在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",
}
});

我也尝试过盒形阴影，但是有一个相同的问题。

Answer 1

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

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

Answer 2

在github上对此问题进行了广泛的讨论。前往Discussion或尝试解决方法

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,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 2,
}

仅使用海拔高度属性。

Answer 3

您可以使用以下代码

external_landing.tbl_public_holidays_2020

Answer 4

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

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

React Native中的海拔

4 个答案: