react-native-device-detection不能与Nexus 7配合使用

时间:2017-03-29 04:51:44

标签: mobile react-native width tablet device-detection

我创建了一个基于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 Emulator屏幕截图

Nexus 7 Emulator Screenshot

Nexus 7设备屏幕截图

Nexus 7 Device Screenshot 但在设备(Nexus 7)中,它每行显示3个图像。(移动行为)。

如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

根据制造商,

Nexus 7 实际上是迷你tablet react-native-device-detection 根据高度/宽度和像this之类的pixelDensity识别设备。

  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;
    }
  }

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