Размер шрифта на iPhone 6s плюс

Когда я тестирую свое первое приложение iO/React Native в XCode/Simulators и на старом iPad-устройстве, приложение выглядит неплохо, размеры все в порядке. Но на новом устройстве iPhone 6s plus все очень мало, текст, поля, paddings похожи вдвое меньше, чем они должны быть. Это проблема отзывчивости? Я предполагаю использовать API PixelRatio, и он все решит? Будет ли он работать правильно после того, как я портирую свое приложение на Android? И значит ли это, что теперь все мои стили мне нужно будет написать, например:

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

вместо просто:

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

?

Ответы

Ответ 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

Это в основном означает, что он вернет переданный номер * 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)