Слишком большая вставка заголовка, даже если я использую опору 'forceInset` со вставками, предоставленными `response-native-safe-area-context'? - PullRequest
0 голосов
/ 08 апреля 2020

Проблема

  • По какой-то причине при тестировании на моем старом 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>
    );
  }

Возможные объяснения

  1. Может ли <SafeAreaView/> автоматически не обнаруживать и устанавливать правильные вставки? Здесь здесь написано: «По умолчанию вставки безопасной области устройства обнаруживаются автоматически.»
  2. Может быть, при использовании пропеллы forceInset на <SafeAreaView/> невозможно изменить опору forceInset на <SafeView>, который является потомком компонента <Header/>, автоматически сгенерированного react-navigation после того, как вы установили правильный связанный с заголовком navigationOptions на экранах / навигаторах?
  3. Может быть какая-то зависимость зависимости 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?
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...