Резонансный детектор экрана

Я использую nativebase.io в качестве инфраструктуры пользовательского интерфейса для моего приложения.

Моя проблема

когда я ввожу заголовок для устройства IOS, если имитатор iPhone имитирует iPhone X (там, где в верхней части экрана есть метка), элемент Header автоматически обнаруживает это и перемещает элемент Header ниже на экране.

Некоторые устройства Android также имеют аналогичную метку в верхней части экрана, но когда я использую элемент заголовка nativebase.io, он не обнаруживает метку, и заголовок перекрывает метку.

Мой вопрос

Есть ли способ на реакции-родной или nativebase.io, чтобы определить, есть ли на дисплее метка? таким образом, я мог бы динамически сместить заголовок.

Ответы

Ответ 1

Поскольку проблема связана с Android, возможно, вам стоит попробовать посмотреть StatusBar.currentHeight. Так как вырез обычно является частью строки состояния, добавление надписи поверх заголовка должно, вероятно, делать это с помощью строки состояния.

Ответ 2

Не используя Expo

Если вы используете React Native без Expo или приложение Expo, которое было удалено, вы можете использовать пакет react-native-device-info. Он имеет функцию hasNotch(), которая очень хорошо работает при обнаружении таких устройств.

Компоненты Native Base Content, Footer и Header проверяют переменную темы isIphoneX, чтобы определить, следует ли добавить пробел для метки устройства.

Вы можете настроить тему Native Base и изменить файлы переменных, чтобы использовать react-native-device-info для обнаружения метки:

# native-base-theme/variables/*.js
import DeviceInfo from 'react-native-device-info';
...
isIphoneX = DeviceInfo.hasNotch();
...

Теперь ваши компоненты Native Base Header, Footer и Content должны добавить соответствующий интервал для устройств с метками.

Использование Expo

Поскольку react-native-device-info не работает над проектами Экспо, не существует простого способа сделать это. Вам нужно написать функцию для достижения вашей цели. Если вы изучите исходный код hasNotch() source code, вы заметите, что функция просто выполняет поиск в массиве на основе устройства brand и model. Вы можете получить модель устройства с помощью Экспо-констант, но они не облегчают задачу:

import { Platform } from 'react-native;
import Constants from 'expo-constants';

const getDeviceModel = () => Platform.select({
  ios: Constants.platform.ios.model,
  android: Constants.deviceName
});

Однако получить устройство brand в Экспо невозможно. Очевидно, что все устройства ios имеют марку Apple, но бренды устройств Android более неуловимы. Возможно, вам удастся создать поисковый массив, который использует только устройство model, но он может быть не таким точным.

Я хотел бы, чтобы было лучшее решение для пользователей Экспо.

Ответ 3

Я использую подход из этого ответа fooobar.com/questions/16509762/..., и он работает нормально для меня.

В React Native выглядит как

import { StatusBar, Platform } from 'react-native';

if (Platform.OS === 'android') {
  const hasNotch = StatusBar.currentHeight > 24;
}

Ответ 5

Попробуйте использовать SafeAreaView, доступный на React Native. Оберните ваш текущий вид. Смотрите эту ссылку для получения дополнительной информации: https://facebook.github.io/react-native/docs/safeareaview

<SafeAreaView style={{flex: 1}}>
   [...Your view component]
</SafeAreaView>