Я делаю свое первое приложение React Native, на данный момент без избыточности, просто RN. Дело в том, что на Android 7 не так много компонентов, но на более поздних версиях Android оно отлично работает на устройствах ввода-вывода.
Вот скриншоты моей проблемы, на Android вы можете увидеть много пустого пространства, но на iOs оно заполнено данными:
Android 7:
IOS:
Вот структура и CSS:
<ScrollView contentContainerStyle={mainView}>
<View style={sectionStyle}>...</View>
<View style={sectionStyle}>...</View>
...
<View style={sectionStyle}>...</View>
</ScrollView>
mainView: {
backgroundColor: colors.backgroundGray,
justifyContent: 'flex-start'
},
sectionStyle: {
paddingTop: 15,
paddingBottom: 15,
backgroundColor: colors.mainWhite,
margin: 5,
borderWidth: 1,
borderColor: colors.borderGray,
borderRadius: 5,
shadowOpacity: 0.5,
shadowRadius: 2,
shadowOffset: {
width: 0,
height: 2
},
shadowColor: colors.shadowColor,
elevation: 5
}
Что может вызвать эту проблему и что можно сделать, чтобы это исправить?
UPD:
После нескольких дней отладки я обнаружил, что проблема может быть вызвана ограничением количества компонентов, отображаемых на экране, в Android 7, потому что на этой странице их много, например 10-15 экранов с иконками, комментариями, ползунками и выпадающие. Если я отображаю только фиктивный текст вместо них - все отображается, и то же самое происходит, если я отображаю почти все из них, за исключением, например, раскрывающихся списков.
Есть идеи?