Проблема
- По какой-то причине при тестировании на моем старом Android телефоне (Android v 6.0.1) заголовок моего приложения Expo SDK 36 всегда имеет дополнительный отступ, выглядит слишком громоздким , хотя у телефона нет высшей метки.
- Тестирование на симуляторе iOS 13.4 для iPhone 11 с меткой, он обрабатывает метку правильно.
Некоторые Результаты отладки
- Когда я просматриваю иерархию компонентов в
react-native-debugger
, я вижу, что: <SafeAreaView />
в моем компоненте Screen из react-native-safe-area-view
имеет правильные значения вставки из context, { top: 0, bottom: 0, left: 0, right: 0 }
- Однако, компонент
<Header />
из react-navigation 4.3.7
имеет safeAreaInsets: { top: 'never' }
, когда я проверяю его props.scene.descriptor.options
, чтобы посмотреть на его navigationOptions
- И далее, если я go в
<Header/>
детей, когда я добираюсь до <SafeView/>
, его props.forceInset.top
будет 'always'
. - Я повысил
react-navigation
сегодня до 4.3.7 с 3.13.0 Мне интересно, есть ли ошибки в более ранних версиях зависимостей, таких как react-native-safe-area-context
и react-native-safe-area-view
, или ошибки с ними в целом. - В
package-lock.json
я заметил, что есть пакет @react-navigation/native
с dependency
из react-native-safe-area-view
в версии 0.14.9
, в то время как я замечаю в package.json
, у меня react-native-safe-area-view
в диапазон деления ^1.0.0
. Я думаю, что установил его с помощью команды expo install
для пакетов, совместимых с вашим Expo SDK, когда впервые изучал инструкции SafeAreaView в документах Expo
- Мой метод рендеринга выглядит следующим образом:
render() {
return (
<SafeAreaConsumer>
{(insets) => {
console.log("render -> insets", insets)
return (
<SafeAreaView
style={{
flex: 1,
backgroundColor: Color.white,
paddingBottom: insets.bottom,
paddingLeft: insets.left,
paddingRight: insets.right,
}}
forceInset={insets}
>
<View style={MainAppViewContainers.container}>
...
</View>
</SafeAreaView>
)
}}
</SafeAreaConsumer>
);
}
Возможные объяснения
- Может ли
<SafeAreaView/>
автоматически не обнаруживать и устанавливать правильные вставки? Здесь здесь написано: «По умолчанию вставки безопасной области устройства обнаруживаются автоматически.» - Может быть, при использовании пропеллы
forceInset
на <SafeAreaView/>
невозможно изменить опору forceInset
на <SafeView>
, который является потомком компонента <Header/>
, автоматически сгенерированного react-navigation
после того, как вы установили правильный связанный с заголовком navigationOptions
на экранах / навигаторах? - Может быть какая-то зависимость зависимости sh между версией
react-native-safe-area-view 0.14.9
, используемой @react-navigation/native 3.7.11
, которая установлена react-navigation 4.3.7
, и react-native-safe-area-view 1.0.0
, установленной Expo?