Изменить собственный размер шрифта

Ответ 1

Вы можете использовать PixelRatio

например:

var React = require('react-native');

var {StyleSheet, PixelRatio} = React;

var FONT_BACK_LABEL   = 18;

if (PixelRatio.get() <= 2) {
  FONT_BACK_LABEL = 14;
}

var styles = StyleSheet.create({
  label: {
    fontSize: FONT_BACK_LABEL
  }
});

Редактировать:

Другой пример:

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

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

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

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

Использование:

fontSize: normalize(24)

вы можете сделать еще один шаг, разрешив размеры для каждого компонента <Text/> помощью заданного размера.

Пример:

const styles = {
  mini: {
    fontSize: normalize(12),
  },
  small: {
    fontSize: normalize(15),
  },
  medium: {
    fontSize: normalize(17),
  },
  large: {
    fontSize: normalize(20),
  },
  xlarge: {
    fontSize: normalize(24),
  },
};

Ответ 2

Мы используем простые, прямолинейные, масштабирующие утилиты, которые мы написали:

import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');

//Guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;

const scale = size => width / guidelineBaseWidth * size;
const verticalScale = size => height / guidelineBaseHeight * size;
const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor;

export {scale, verticalScale, moderateScale};

Сэкономит вам некоторое время, выполняя многие операции ifs. Вы можете больше узнать об этом в своем сообщении в блоге.

Ответ 3

Посмотрите на библиотеку, которую я написал: https://github.com/tachyons-css/react-native-style-tachyons

Он позволяет вам указать root-fontSize (rem) при запуске, который вы можете сделать зависимым от вашего PixelRatio или других характеристик устройства.

Затем вы получаете стили относительно вашего rem, не только fontSize, но и paddings и т.д., А также:

<Text style={[s.f5, s.pa2, s.tc]}>
     Something
</Text>

Expanation:

• f5 всегда ваш базовый размер шрифта
• pa2 дает вам отступ относительно вашего базового размера шрифта.

Ответ 4

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

Вы можете написать модуль, например:

function fontSizer (screenWidth) {
  if(screenWidth > 400){
    return 18;
  }else if(screenWidth > 250){
    return 14;
  }else { 
    return 12;
  }
}

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

Этот модуль или этот может помочь вам найти размеры устройства или тип устройства.

Ответ 5

Я просто использую соотношение размера экрана, которое отлично работает для меня.

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

// Use iPhone6 as base size which is 375 x 667
const baseWidth = 375;
const baseHeight = 667;

const scaleWidth = width / baseWidth;
const scaleHeight = height / baseHeight;
const scale = Math.min(scaleWidth, scaleHeight);

export const scaledSize =
    (size) => Math.ceil((size * scale));

Тестовое задание

const size = {
    small: scaledSize(25),
    oneThird: scaledSize(125),
    fullScreen: scaledSize(375),
};

console.log(size);

// iPhone 5s
{small: 22, oneThird: 107, fullScreen: 320}
// iPhone 6s
{small: 25, oneThird: 125, fullScreen: 375}
// iPhone 6s Plus
{small: 28, oneThird: 138, fullScreen: 414}

Ответ 6

Мне удалось преодолеть это, сделав следующее.

• Выберите размер шрифта, который вам нравится для текущего вида просмотра (убедитесь, что он отлично подходит для текущего устройства, которое вы используете в имитатор).

• import { Dimensions } from 'react-native' и определить ширину вне этого компонента: let width = Dimensions.get('window').width;

• Теперь console.log(ширина) и запишите его. Если ваш красивый шрифт размер составляет 15, и, например, ваша ширина равна 360, затем возьмите 360 и разделите на 15 (= 24). Это будет важным значением, которое будет настраиваться на разные размеры.

  Используйте этот номер в объекте стилей следующим образом: textFontSize: { fontSize = width / 24 },...

Теперь у вас есть отзывчивый fontSize.

Ответ 7

Я недавно столкнулся с этой проблемой и в конечном итоге использовал response-native-extended-stylesheet

Вы можете установить значение rem и дополнительные условия размера в зависимости от размера экрана. Согласно документам:

// component
const styles = EStyleSheet.create({
  text: {
    fontSize: '1.5rem',
    marginHorizontal: '2rem'
  }
});
// app entry
let {height, width} = Dimensions.get('window');
EStyleSheet.build({
  $rem: width > 340 ? 18 : 16
});

Ответ 8

import {Dimensions} из'act-native ';

const {width, fontScale } = Dimensions.get("window");

const styles = StyleSheet.create({fontSize: idleFontSize/fontScale ,});

fontScale получить масштаб в соответствии с вашим устройством.

Ответ 9

Мы можем использовать гибкий макет и использовать AdjusttsFontSizeToFit = {true} для адаптивных размеров шрифта. И текст будет корректироваться в соответствии с размером контейнера.

     <Text
    adjustsFontSizeToFit
    style={styles.valueField}>{value}
    </Text>

Но в стилях вам также нужно указать размер шрифта, тогда он будет корректировать работу FontSizeToFit.

    valueField: {
    flex: 3,
    fontSize: 48,
    marginBottom: 5,
    color: '#00A398',
},

Ответ 10

Вы можете использовать что-то вроде этого.

var {height, width} = Dimensions.get('window'); var textFontSize = width * 0.03;

inputText: {
    color : TEXT_COLOR_PRIMARY,
    width: '80%',
    fontSize: textFontSize
}

Надеюсь, что это поможет без установки сторонних библиотек.