Межбуквенный интервал в React Native - Android

Я использую React Native 0.29 с эмулятором Android (уровень API 23). Я пытаюсь достичь letterSpacing на Text компоненте. Но вроде не работает на Android. Официальная документация говорит, что работает только в iOS. Есть ли способ решения этой проблемы?


react-native react-native-android
person Provash Shoumma    schedule 19.07.2016    source источник

Ответы (4)


arrow_upward
28
arrow_downward

Отсутствие межбуквенного интервала в Android можно «решить», добавив один или несколько пробелов между каждым символом. Я обнаружил, что юникод HAIR_SPACE U+200A дает наилучшие результаты, но вам, возможно, придется поэкспериментировать, чтобы найти то, что лучше всего подходит для вашего шрифта. Например, 2 пробела или один U+2009 THIN SPACE.

function applyLetterSpacing(string, count = 1) { return string.split('').join('\u200A'.repeat(count)); }

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

Пробелы Юникода: https://www.cs.tut.fi/~jkorpela/chars/spaces.html

person hanse    schedule 01.08.2016
comment
Это хорошо работает для мелкого шрифта, но для заголовков все равно слишком широкое. Есть ли что-то тоньше, чем пространство для волос? Я искал, но ничего не нашел. Пиксельное пространство? - person Teodors; 03.11.2016
comment
Одна проблема заключается в том, что с более длинными (разрывными) текстами текст может разрываться после каждого символа (из-за пробела). Кто-нибудь нашел для этого решение? - person erikvdplas; 25.06.2017

arrow_upward
4
arrow_downward

Похоже, что в React Native 0.30 letterSpacing также есть только для iOS . Вы всегда можете добавить это и сделать запрос на перенос :)

Другой вариант - создать функцию, которая берет строку и добавляет интервал вокруг каждой буквы. (хотя это было бы взломом!)

person John Veldboom    schedule 30.07.2016

arrow_upward
4
arrow_downward

вы можете указать пробел между буквами, используя свойства по умолчанию компонента Text.

<Text style={{ fontSize: 18, letterSpacing: 3, color: '#FFFFFF' }}>Stack Overflow</Text>
person Menon Hasan    schedule 27.01.2021

arrow_upward
3
arrow_downward

Обновите React Native как минимум до версии 0.55, чтобы межбуквенный интервал на Android работал.

person Christopher Regner    schedule 19.02.2019