Размер адаптивного шрифта React-native

Я разрабатываю приложение для планшета (Android и iOS) с Expo и React-Native.

Мне удалось сделать верстку отзывчивой, без каких-либо проблем. После запуска приложения на устройствах разного размера я заметил, что забыл о скорости реагирования на размер шрифта.

Я перепробовал каждую библиотеку npm, которую смог найти (react-native-responsive-fontsize, react-native-cross-platform-responsive-dimensions, react-native-responsive-fontsize). С любым из них я столкнулся с той же проблемой: при запуске приложения, в зависимости от ориентации устройства, размер шрифта отображается по-другому. (т. е. если я открываю приложение, когда держу устройство в портретном режиме, размер шрифта заметно больше по сравнению с тем, когда я открываю приложение, когда я держу устройство в альбомном режиме - альбомный режим является ориентацией моего приложения по умолчанию). Я попытался заблокировать ориентацию экрана моего приложения в альбомной ориентации при запуске и сбросил ее до значений по умолчанию после установки моего первого компонента, но это также не помогло.

Я пришел к выводу, что это происходит потому, что все эти библиотеки используют размеры устройства для получения процентных значений того, что я им передаю, но относятся только к одному измерению (ширине или высоте), которые различаются в зависимости от исходной ориентации устройства.

Я попытался реализовать свое собственное решение, думая о чем-то, что будет основываться как на ширине, так и на высоте, а не только на одном из них, и у меня появилась эта функция:

const height = Dimensions.get('window').height;
const width = Dimensions.get('window').width;

export function proportionalSize(size) {
     let aspectRatioSize = width * height;
     let aspectRatioUnit = aspectRatioSize * 0.00001;

     return parseFloat(size) * 0.1 * aspectRatioUnit;
}

Это работает только на устройстве, на котором я разрабатываю приложение ... размеры шрифта не будут сохранять те же пропорции на других устройствах с другим размером экрана.

Я потерял достаточно дней, изменяя размеры шрифтов всего кода, пытаясь переключаться между библиотеками. У вас есть идеи, как я могу с этим справиться или что мне не хватает? Сначала я учил, что это будет моя самая маленькая проблема, но я ошибался.

Позднее редактирование: я заметил, что моя проблема исчезла после перезагрузки приложения. Это происходит только при первом рендеринге, а после перезагрузки font-size работает нормально.


react-native reactjs expo responsive-design responsiveness
person john doe    schedule 19.07.2019    source источник
comment
По какой причине вы не хотите просто использовать rem вместо px в своем CSS?   -  person foxtrotuniform6969    schedule 19.07.2019
comment
@nbaughman - Потому что такие единицы, как px и rem, недоступны в react-native. Конечно, есть множество пакетов, которые могут их реализовать, но по моему опыту они не всегда работают должным образом.   -  person john doe    schedule 22.07.2019
comment
Вот дерьмо, я это знал.   -  person foxtrotuniform6969    schedule 22.07.2019

Ответы (3)


arrow_upward
11
arrow_downward

вы можете использовать эту функцию

import { Dimensions, Platform, PixelRatio } from 'react-native';

const {
  width: SCREEN_WIDTH,
  height: SCREEN_HEIGHT,
} = Dimensions.get('window');

// based on iphone 5s's scale
const scale = SCREEN_WIDTH / 320;

export function actuatedNormalize(size) {
  const newSize = size * scale
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
  }
}

и использовать

fontSize: actuatedNormalize(12)
person vishu2124    schedule 19.07.2019
comment
В конце я использовал вариант этого, но добавил две вещи: оператор if, чтобы проверить ширину устройства (если высота ›ширина, то высота будет шириной), и оператор if для настройки возвращаемого значения на основе на некоторых размерах экрана планшетов по умолчанию. Я отмечу это как принятый ответ, потому что большая часть моего рабочего решения пришла отсюда. Спасибо. - person john doe; 23.07.2019

arrow_upward
0
arrow_downward

Я думаю, что базовые расчеты отключены ... Мне не удалось добиться точного масштабирования между телефоном и планшетом, поэтому я изменил расчет, чтобы использовать соотношение сторон, основанное на _1 _..., это исправило его, чтобы отображать точно так же на обоих устройствах .

import { Dimensions, Platform, PixelRatio } from 'react-native';

const {
  width,
  height,
} = Dimensions.get('window');

export function normalize(size, multiplier = 2) {
  const scale = (width / height) * multiplier;

  const newSize = size * scale;

  return Math.round(PixelRatio.roundToNearestPixel(newSize));
}
person Timmerz    schedule 19.06.2021

arrow_upward
-1
arrow_downward

Лучше всего иметь 2 шкалы, одну для телефонов, а другую для планшетов.

person Mustafa Bayati    schedule 19.06.2021
comment
таким образом трудно поддерживать - person Vasyl Nahuliak; 19.06.2021