Question

当我在XCode /模拟器和旧iPad设备上测试我的第一个iOs / React Native应用程序时，该应用程序看起来不错，尺寸都很好。但是在新的iPhone 6s plus设备上，一切都非常小，文字，边距，填充比它们应该少两倍。是响应问题吗？我想使用PixelRatio API，它会解决所有问题吗？我将在Android上移植我的应用程序后它仍能正常工作吗？这是否意味着我现在所有的风格都需要写成：

var myStyle = {
  Post: {
    width: PixelRatio.getPixelSizeForLayoutSize(200),
    margin: PixelRatio.getPixelSizeForLayoutSize(100),
  }
}

而不只是：

var myStyle = {
  Post: {
    width: 200,
    margin: 100,
  }
}

Answer 1

简短的回答是肯定的，你必须考虑所有字体的响应能力。我使用了一些方法。

正如您所提到的，您可以使用getPixelSizeForLayoutSize。 getPixelSizeForLayoutSize基本上看起来像这样：

static getPixelSizeForLayoutSize(layoutSize: number): number {
    return Math.round(layoutSize * PixelRatio.get());
}

问题在于PixelRatio.get将返回以下值：

   * PixelRatio.get() === 1
   *     - mdpi Android devices (160 dpi)
   *   - PixelRatio.get() === 1.5
   *     - hdpi Android devices (240 dpi)
   *   - PixelRatio.get() === 2
   *     - iPhone 4, 4S
   *     - iPhone 5, 5c, 5s
   *     - iPhone 6
   *     - xhdpi Android devices (320 dpi)
   *   - PixelRatio.get() === 3
   *     - iPhone 6 plus
   *     - xxhdpi Android devices (480 dpi)
   *   - PixelRatio.get() === 3.5
   *     - Nexus 6

这基本上意味着它会在iPhone6上返回传入的数字* 2，在iPhone6 Plus上返回* 3，因为iPhone6Plus的字体大小太大，因此通常不能正确缩放。 iPhone6和iPhone4也将获得相同的处理，这不是最佳选择。

我们为解决这个问题所做的是编写一个帮助函数来计算设备的高度并返回一个大小。

虽然这个确切的实现可能并不完全符合您的要求，但以下的一些变体可能会为您解决这个问题，因为它对我们来说是这样的：

var React = require('react-native')
var {
  Dimensions
} = React

var deviceHeight = Dimensions.get('window').height;

export default (size) => {
    if(deviceHeight === 568) {
        return size
    } else if(deviceHeight === 667) {
        return size * 1.2
    } else if(deviceHeight === 736) {
        return size * 1.4
    }
    return size
}

然后像这样使用它：

var normalize = require('./pathtohelper')

fontSize: normalize(14),
borderWidth: normalize(1)

这是另一种方式，更接近getPizelRatioForLayoutSize的原始实现。唯一的问题是你仍然得到相同的iPhone6和iPhone4值，所以它不太准确，但比原生getPizelRatioForLayoutSize更好：

var React = require('react-native')
var {
  PixelRatio
} = React

var pixelRatio = PixelRatio.get()

export default (size) => {
    if(pixelRatio == 2) {
        return size
    } 
    return size * 1.15
}

然后像这样使用它：

var normalize = require('./pathtohelper')

fontSize: normalize(14),
borderWidth: normalize(1)

iPhone 6s加上字体大小

1 个答案: