Обнаружение устройства-реакции не работает с Nexus 7

Я создал приложение imageGallery, созданное на основе React-Native. Основное требование

  • Mobile View показывает 3 изображения в строке.
  • Вид планшета показывает 5 изображений в строке.

Обнаружение устройства выполняется с использованием реагирования на устройство.

Количество изображений в строке ограничено с помощью Dimensions объект.

const Device = require('react-native-device-detection');
 if(Device.isTablet) {
 Object.assign(styles, {
  image: {
    width: Dimensions.get('window').width / 5 - 10 ,
    height: Dimensions.get('window').width / 5 - 10,
  }
 });
}
if(Device.isPhone) {
 Object.assign(styles, {
  image: {
    width: Dimensions.get('window').width / 3 - 10 ,
    height: Dimensions.get('window').width / 3 - 10,
  }
 });
}

Это прекрасно работает в мобильном телефоне, а также в симуляторе (Nexus 7). Проверено с помощью https://material.io/devices/. Nexus 7 поставляется под планшетом.Скриншот эмулятора Nexus 7

Скриншот эмулятора Nexus 7

Скриншот устройства Nexus 7

Скриншот устройства Nexus 7 Но в устройстве (Nexus 7) он показывает 3 изображения в строке.(Мобильное поведение).

Как это можно исправить?

1 ответ

Решение

Nexus 7 на самом деле является мини- планшетом в зависимости от производителя. response-native-device-Detection идентифицирует устройство на основе их высоты / ширины и плотности пикселей, как это.

  isPhoneOrTablet() {
    if(this.pixelDensity < 2 && (this.adjustedWidth >= 1000 || this.adjustedHeight >= 1000)) {
      this.isTablet = true;
      this.isPhone = false;
    } else if(this.pixelDensity === 2 && (this.adjustedWidth >= 1920 || this.adjustedHeight >= 1920)) {
      this.isTablet = true;
      this.isPhone = false;
    } else {
      this.isTablet = false;
      this.isPhone = true;
    }
  }

Существует вероятность неверной информации, если устройство имеет нестандартные размеры, вы можете добавить свои собственные расчеты, чтобы сделать его более точным.

Другие вопросы по тегам