0

我创建了一个基于 React-Native 构建的 imageGallery 应用程序。基本要求是

  • 移动视图每行显示 3 张图像。
  • 平板电脑视图每行显示 5 张图像。

设备检测是使用react-native-device-detection完成的

每行的图像数量是使用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 张图像。（移动行为）。

如何解决这个问题？

4

1 回答 1

0

根据制造商的说法， Nexus 7实际上是一款迷你平板电脑。react-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;
    }
  }

如果设备具有非正统尺寸，则可能会出现错误信息，您可以添加自己的自定义计算以使其更准确。

于 2017-03-29T06:02:44.627 回答