Блог

Я столкнулся с проблемой, когда, по-видимому, при использовании useWindowDimensions() в React-Native длина кратчайшего измерения неверна.

Минимальный воспроизводимый пример: Создайте приложение с нуля, используя npx react-native run-android и вставьте следующее в App.js :

 export default function App() {
  return (
    <View style={{flex: 1}}>
      <View
        style={{
          height: 100,
          width: 100,
          backgroundColor: 'red',
          position: 'absolute',
          top: useWindowDimensions().height - 20,
        }}>
      </View>
    </View>
  );
}
 

Пояснение: на экране есть изображение красного цвета размером 100 х 100, расположенное абсолютно точно. Делая top: useWindowDimensions().height - 20 это , я говорю виду переместиться полностью вниз и просто «заглянуть» на 20 dps.

В портретной ориентации это работает:

Но на ландшафте это не работает. Вид не заглядывает снизу

На самом деле, вид все еще скрыт внизу. Вычитания 20 с высоты экрана было недостаточно. Я поиграл и обнаружил, что мне нужно вычесть, по крайней мере 28 , чтобы сделать это видимым:

What’s going on? I would have expected that useWindowDimensions().height returned 28 less than what it did. Is this a bug? Or am I missing/not considering something else?

Note: at the beginning I thought it could be because of Android’s status bar or navigation/action bar. But that doesn’t make sense…because IT WORKS with a Portrait Orientation.