Высота в React Native

Question

Вот мой стиль, определенный на собственном экране.Я использовал свойство 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

Широко обсуждается эта проблема на github.перейдите на Обсуждение или вы можете попробовать решение

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 2

Попробуйте добавить следующие свойства к styles.box.Вы можете изменить значения для лучшего результата.

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