react native text size
v3.0.0
Точно измерьте текст, прежде чем выложить его и получить информацию о шрифте из вашего приложения (Android и iOS).
| В моей стране (Мексика) разработчикам программного обеспечения плохо платят, поэтому мне пришлось искать другую работу, чтобы зарабатывать на жизнь, и я не могу посвятить больше времени для подготовки такого и других репозиториев, которые на протяжении многих лет нуждались в каких -либо деньгах для меня. Если кто -то взаимодействует в поддержании этого репозитория, я бы рад передать его им вместе с соответствующим пакетом NPM. |
|---|
| В моей стране (Мексика) разработчики программного обеспечения в ужасе, поэтому мне пришлось искать другую работу, чтобы зарабатывать на жизнь, и я не могу тратить больше времени на сохранение этого и других репозиториев, чем в течение многих лет, никогда не приносили деньги. Если кто -то заинтересован в поддержании этого репозитория, я с радостью передам его, а также соответствующий пакет NPM. |
Существует две основные функции: flatHeights , чтобы одновременно получить высоту различных блоков текста, оптимизированные для таких компонентов, как <FlatList> или <RecyclerListView> .
Другой - это measure , которая получает подробную информацию о тексте текста:
Ширина и высота практикуют такую же, как и те, которые получали от события onLayout компонента <Text> с теми же свойствами.
В обеих функциях требуется измеренный текст, но остальные параметры не являются обязательными и работают так же, как и при нативном React:
fontFamilyfontSizefontWeightfontStylefontVariant (iOS)includeFontPadding (Android)textBreakStrategy (Android)letterSpacingallowFontScalingwidth : ограничение для автоматического разрыва линии на основе стратегии текста.В Adionion библиотека включает в себя функции для получения информации о шрифтах, видимых для приложения.
Если это помогло вам, пожалуйста, поддержите мою работу со звездой или KO-Fi.
В основном автоматическая установка от NPM
yarn add react-native-text-size
react-native link react-native-text-size Измените директиву compile на implementation в блоке зависимостей файла Android/App/build.grale.
Требования:
Для версий до 0,56 REACT Native, пожалуйста, используйте V2.1.1 React-Clive-Text-Size V2.1.1
См. Ручную установку на вики в качестве альтернативы, если у вас есть проблемы с автоматической установкой.
measure
flatHeights
specsForTextStyles
fontFromSpecs
fontFamilyNames
fontNamesForFamilyName
measure ( options : TSMeasureParams ) : Promise < TSMeasureResult > Эта функция измеряет текст, как это делает RN, и его результаты состоят* с функцией события Text 's Onlayout. Требуется подмножество свойств, используемых <Text> для описания опций шрифта и OHER для использования.
Если вы обеспечиваете width , измерение применит автоматическую упаковку в дополнение к явным разрывам линии.
* В iOS могут быть противоречивые, увидеть эту проблему, чтобы узнать больше.
Примечание:
Хотя эта функция является точной и предоставляет полную информацию, она может быть тяжелой, если текст много, например, тот, который может отображаться в списке. Для этих случаев лучше использовать flatHeights , что оптимизировано для переработки партии.
Простой объект JS с этими свойствами (требуется только text ):
| СВОЙСТВО | Тип | По умолчанию | Примечания |
|---|---|---|---|
| Текст | Нить | (Никто) | Это единственный требуемый параметр и может включать смайлики или быть пустым, но он не должен быть null .Если это пустая строка, результирующая width будет равна нулю. |
| Фонфимилия | Нить | Я зависим | По умолчанию то же самое применяется от React Native: Roboto в Android, Сан -Франциско, в iOS. Примечание. Производитель устройства или пользовательский ПЗУ может изменить шрифт по умолчанию. |
| Шрифт | Нить | 'нормальный' | На Android диапазоны чисел у вас нет гранулярности, а «500»-900 'становится «жирным шрифтом», но вы можете использовать fontFamily конкретного веса («Sans-Serif-thin», «Sans-Serif-Medium» и т. Д.). |
| Fontsize | Число | 14 | Размер шрифта по умолчанию поступает от RN. |
| Fontstyle | Нить | 'нормальный' | Один из «нормальных» или «курсива». |
| Fontvariant | Множество | (Никто) | Только iOS |
| Разрешить | Логический | Истинный | Чтобы уважать настройку пользователя больших шрифтов (то есть использовать SP -единицы). |
| Пластинка | Число | (Никто) | Дополнительное расстояние между персонажами (он же tracking ).Примечание. В iOS ноль отменяет автоматический кернинг. Все iOS, Android с API 21+ |
| Включите FONTPADDING | Логический | Истинный | Аддионная верхняя и нижняя прокладка, чтобы не обрезать определенных символов. Только для Android |
| Textbreakstrategy | Нить | 'Highqualy' | Один из «простой», «сбалансированного» или «высокого уровня». Только Android, с API 23+ |
| Ширина | Число | Max_int | Ограничить ширину. Высота результата будет варьироваться в зависимости от автоматического потока текста. |
| Useprecisewidth | Логический | ЛОЖЬ | Если true , результат будет включать в себя точную width и свойство lastLineWidth .Вы можете увидеть эффект этого флага в приложении образца. |
| LineInfoforline | Число | (Никто) | Если >=0 , результат будет включать свойство LineInfo с информацией для требуемого номера строки. |
Приложение примера отображает интерактивное влияние этих параметров на экран.
measure возвращает обещание, которое разрешает объект JS с этими свойствами:
| СВОЙСТВО | Тип | Примечания |
|---|---|---|
| Ширина | Число | Общая использованная ширина. Это может быть LES или равна варианту width .На Android это значение может варьироваться в зависимости от флага usePreciseWidth . |
| Высота | Число | Общая высота, включая верхнюю и нижнюю прокладку, если была установлена includingFontPadding (по умолчанию). |
| Последняя ширина | Число | Ширина последней строки, без запуска пробелов. Если usePreciseWidth является false (по умолчанию), это свойство не определен. |
| LineCount | Число | Количество строк с учетом жестких и автоматических разрывов линий. |
| LineInfo | Объект | Линейная информация. Если опция lineInfoForLine не указана, это свойство не определен. |
Если значение lineInfoForLine - Greelter или Ecy lineCount , эта информация для последней строки (то есть lineCount - 1).
| СВОЙСТВО | Тип | Примечания |
|---|---|---|
| ЛИНИЯ | Число | Номер строки этой информации, база 0. Это может быть меньше, чем линия lineInfoForLine . |
| Начинать | Число | Смещение текста в начале этой строки. |
| конец | Число | Смещение текста после последнего видимого символа (поэтому пробел не подсчитывается) на этой строке. |
| Нижний | Число | Вертикальное положение нижней части этой линии, включая прокладку. |
| Ширина | Число | Горизонтальная эксте -эксте этой линии, включая ведущий маржинальный отступ, но за исключением тягочного пробела. Используйте usePreciseWidth:true , чтобы получить точное значение для этого свойства. |
В случае ошибки обещание отклоняется расширенным объектом с одним из следующих кодов ошибок, в виде буквальной строки:
| Код | Подробности |
|---|---|
| E_missing_parameters | measure требует объекта с параметрами, который не был предоставлен. |
| E_missing_text | Текст для измерения является null или не был предоставлен. |
| E_invalid_font_spec | Спецификация шрифта недопустим. Маловероятно, что это произойдет на Android. |
| E_unknown_error | Ну ... кто знает? |
//...
import rnTextSize , { TSFontSpecs } from 'react-native-text-size'
type Props = { }
type State = { width : number , height : number }
// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs : TSFontSpecs = {
fontFamily = undefined ,
fontSize = 24 ,
fontStyle = 'italic' ,
fontWeight = 'bold' ,
}
const text = 'I ❤️ rnTextSize'
class Test extends Component < Props , State > {
state = {
width : 0 ,
height : 0 ,
}
async componentDidMount ( ) {
const width = Dimensions . get ( 'window' ) . width * 0.8
const size = await rnTextSize . measure ( {
text , // text to measure, can include symbols
width , // max-width of the "virtual" container
... fontSpecs , // RN font specification
} )
this . setState ( {
width : size . width ,
height : size . height
} )
}
// The result is reversible
render ( ) {
const { width , height } = this . state
return (
< View style = { { padding : 12 } } >
< Text style = { { width , height , ... fontSpecs } } >
{ text }
</ Text >
</ View >
)
}
} flatHeights ( options : TSHeightsParams ) : Promise < number [ ] >Рассчитайте высоту каждой из струн в массиве.
Это альтернатива для measure , обозначенной для случаев, в которых вы рассчитываете высоту числа текстовых блоков с общими характеристиками (ширина, шрифт и т. Д.), Типичный вариант использования с компонентами <FlatList> или <RecyclerListView> .
Измерение использует тот же алгоритм, что и measure , но он возвращает только высоту каждого блока и, избегая нескольких шагов через мост, он быстрее ... намного быстрее на Android!
Я провел тесты на 5000 случайных текстовых блоков, и это были результаты (MS):
measure | flatHeights | |
|---|---|---|
| Android | 49 624 | 1 091 |
| ios | 1949 | 732 |
В будущем я подготовлю пример его использования с Flatlist и несколькими стилями на одной карте.
Это объект, похожий на тот, который вы проходите, чтобы measure , но опция text представляет собой массив строк, а опции usePreciseWidth и lineInfoForLine игнорируются.
| СВОЙСТВО | Тип | По умолчанию |
|---|---|---|
| Текст | Нить [] | (Никто) |
| Ширина | Число | Бесконечность |
| Фонфимилия | Нить | Я зависим |
| Шрифт | Нить | 'нормальный' |
| Fontsize | Число | 14 |
| Fontstyle | Нить | 'нормальный' |
| Fontvariant | Множество | (Никто) |
| Разрешить | Логический | Истинный |
| Пластинка | Число | (Никто) |
| Включите FONTPADDING | Логический | Истинный |
| Textbreakstrategy | Нить | 'Highqualy' |
Результаты - это обещание, которое разрешается массивам с высотой каждого блока (в SP ), в том же порядке, в котором были получены блоки.
В отличие от меры, null элементы возвращают 0 без ошибки, а пустые строки возвращают ту же высоту, что и RN, назначает null компоненты <Text> .
//...
import rnTextSize , { TSFontSpecs } from 'react-native-text-size'
type Props = { texts : string [ ] }
type State = { heights : number [ ] }
// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs : TSFontSpecs = {
fontFamily = undefined ,
fontSize = 24 ,
fontStyle = 'italic' ,
fontWeight = 'bold' ,
}
const texts = [ 'I ❤️ rnTextSize' , 'I ❤️ rnTextSize using flatHeights' , 'Thx for flatHeights' ]
class Test extends Component < Props , State > {
state = {
heights : [ ] ,
}
async componentDidMount ( ) {
const { texts } = this . props
const width = Dimensions . get ( 'window' ) . width * 0.8
const heights = await rnTextSize . flatHeights ( {
text : texts , // array of texts to measure, can include symbols
width , // max-width of the "virtual" container
... fontSpecs , // RN font specification
} )
this . setState ( {
heights
} )
}
render ( ) {
const { texts } = this . props
const { heights } = this . state
return (
< View style = { { padding : 12 } } >
{ texts . map (
( text , index ) => (
< Text style = { { height : heights [ index ] , ... fontSpecs } } >
{ text }
</ Text >
)
) }
</ View >
)
}
} specsForTextStyles ( ) : Promise < { [ key : string ] : TSFontForStyle } >Получить системную информацию шрифта для управляемой ОС.
Это обертка для UIFont.preferredFontForTextStyle oros
Результатом является обещание, что решает объект JS, которые клавиши зависят от ОС, но его значения, в свою очередь, являются полностью совместимыми, используемыми в стилях RN, поэтому его можно использовать для стилизации <Text> или <TextInput> компонентов:
| СВОЙСТВО | Тип | Примечания |
|---|---|---|
| Фонфимилия | Нить | Системная фамилия или лицо шрифта. |
| Fontsize | Число | Размер шрифта в SP (неквалифицированный). |
| Fontstyle | Tsfontstyle | Только если «курсив», не определен, если стиль «нормальный». |
| Шрифт | Tsfontweight | Только если «смелый», не определен, если вес «нормальный». |
| Fontvariant | Tsfontvariant [] или null | Только iOS . В настоящее время ни один стиль не включает в себя это свойство. |
| Пластинка | Число | Пропущен, если работа на Android с RN Loower, чем 0,55 |
Чтобы узнать ключевые имена, см. Ключи из Specsfortextstyles в вики.
Я не пытался нормализовать ключи результата, потому что, за исключением двух или трех, они имеют различную интерпретацию в каждой ОС, но вы можете использовать их для создания таможенных стилей в соответствии с вашими потребностями.
fontFromSpecs ( specs : TSFontSpecs ) : Promise < TSFontInfo >Возвращает характеристики шрифта, полученного из заданных спецификаций.
Этот параметр представляет собой подмножество TSMeasureParams , поэтому детали здесь опущены.
| СВОЙСТВО | Тип | По умолчанию |
|---|---|---|
| Фонфимилия | Нить | iOS: «Сан -Франциско», Android: 'roboto' |
| Шрифт | Нить | 'нормальный' |
| Fontsize | Число | 14 |
| Fontstyle | Нить | 'нормальный' |
| Fontvariant | Нить [] | (Никто) |
| Пластинка | Число | 0 |
fontFromSpecs использует неявное allowsFontScaling:true и, поскольку это не является измерением, includeFontPadding , что вы не имеете значения.
Результаты - это обещание, которое разрешает объект JS с информацией для данного шрифта и размера, единиц в SP в Android или точках в iOS, используя номера плавающей запятой, где применяется*.
| СВОЙСТВО | Тип | Подробности |
|---|---|---|
| Фонфимилия | Нить | В Android это та же самая строка, которую проходила как параметр. |
| FONTNAME | Нить | Только iOS , всегда undefined в Android. |
| Fontsize | Число | Это может отличаться от данного параметра, если параметр включает в себя десятичные десятичные знаки. |
| Fontstyle | Нить | «Нормальный» или «курсив». |
| Шрифт | Нить | «Нормальный» или «смелый», на iOS может перейти от «100» до «900». |
| Fontvariant | Нить [] | Только iOS , всегда undefined в Android. |
| подняться | Число | Рекомендуемое расстояние над базовой линейкой для выявленного текста. |
| спускаться | Число | Рекомендуемое расстояние ниже базовой линии для выявленного текста. |
| Кафейт | Число | IOS только высота капитальных персонажей. |
| Xheight | Число | IOS только высота нижнего регистра "x". |
| вершина | Число | Только для Android . Максимальное расстояние над базовой линейкой для глифа Tallles в шрифте. |
| Нижний | Число | Только для Android . Максимальное расстояние ниже базовой линии для самого низкого глифа в шрифте. |
| Ведущий | Число | Рекомендуемое дополнительный пространство для добавления между линиями текста. |
| Lineheight | Число | Рекомендуемая высота линии. Это должно быть больше, если текст содержит символы Unicode, такие как смайлики. |
| _Hash | Число | Хэш -код, может быть полезен для отладки. |
* Использование поплавок является более точным, чем целые числа, и позволяет использовать метод предпочтения округления, но не более 5 цифр точности в этих значениях. Кроме того, помните, что RN не работает с субпикселями в Android и усеет эти значения.
Смотрите больше в:
Понимание типографии на сайте проектирования материалов Google.
О обработке текста в iOS для iOS.
fontFamilyNames ( ) : Promise < string [ ] >Возвращает обещание для множества фамилий для шрифтов, доступных в системе.
На iOS вы используете метод uikit UIFont.familyNames .
На Android результат жестко кодируется для системных шрифтов и динамически дополняет шрифты, установленные вашим приложением, если таковые имеются.
Посмотрите на шрифты Android и пользовательские шрифты в вики, чтобы узнать больше об этом списке.
fontNamesForFamilyName ( fontFamily : string ) : Promise < string [ ] > Обертка для метода UIFont.fontNamesForFamilyName uikit, возвращает массив имен шрифтов, доступных в конкретной семье шрифтов.
Вы можете использовать функцию fontFamilyNames RntextSize, чтобы получить массив доступных фамилий шрифтов в системе.
Это функция только для iOS , на Android она всегда решает null .
В iOS результирующая ширина обоих, measure , и flatHeights включает в себя лидирующие пробелы, в то время как в Android они отбрасываются.
На iOS RN принимает на счет абсолютную позицию на экране для расчета размеров. Rntextize не может этого сделать, и обе, ширина и высота могут иметь разницу до 1 пикселя (не точка).
RN не поддерживает размеры динамических типов, но отлично подражает этой функции Thruch allowFontScaling ... Excect для letterSpacing которая не масштабирована.
Я надеюсь, что будущая версия RN решает эту проблему.
Хотя rntextsize предоставляет полученные lineHeight в соответствии с функциями, он не поддерживает его как параметр, потому что вы используете нестандартный алгоритм для его установки. Я рекомендую вам не использовать lineHeight , если он не является строго нуждающимся, но если вы используете его, попробуйте сделать его на 30% или больше, чем размер шрифта, или использовать метод rntextize fontFromSpecs если вы хотите большую точность.
Вложенные <Text> компоненты (или с изображениями внутри)
Я разработчик с полным стеком с более чем 20-летним опытом, и я стараюсь поделиться большей частью своей работы бесплатно и помогать другим, но это занимает значительное количество времени и усилий, поэтому, если вам нравится моя работа, пожалуйста, подумайте ...
Конечно, обратная связь, PR и звезды также приветствуются?
Спасибо за вашу поддержку!
Лицензия BSD 2-CLAUSE «упрощенная».
© 2018-2019, Альберто Мартинес. Все права защищены.
