react-native - iPhone 6s plus上的字体大小

当我在XCode / Simulators和旧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,
  }
}

？

最佳答案

简短的答案是肯定的，您将必须考虑所有字体的响应能力。我已经使用了几种方法。

如前所述，您可以使用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

这基本上意味着它将返回传入的数字* 2在iPhone6上，* 3在iPhone6 Plus上，由于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)

关于react-native - iPhone 6s plus上的字体大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34837342/