Текст обрезается в Android для реагирования на родной

Я работаю над React Native, и я новичок в этом. Я пытаюсь отобразить текст, но он отображается в конце текста Android ... и не показывает полный текст. Это происходит только в Android, в iOS работает нормально.

Я написал следующий код

<Text
  numberOfLines = {1}
  adjustsFontSizeToFit
  minimumFontScale = {0.1}
  style = {labelStyle} //labelStyle nothing I have written
></Text>

Может ли кто-нибудь предложить мне, где я делаю неправильно в коде?

Текст обрезается в Android для реагирования на родной

пожалуйста, поделитесь дополнительным кодом, например, родительским представлением или т. д.

— 19.02.2019 04:32

android reactjs react-native text

18.02.2019 16:27

Коллекции (ArrayList , HashSet , HashMap)

20 570

Перейти к ответу Данный вопрос помечен как решенный

Ответы 13

Ответ принят как подходящий

Обычно это происходит, когда у вас есть это: fontWeight:bold и ваше устройство Android, например, Oneplus или Oppo (хотя есть и другие бренды), это конфликт с вашим системным шрифтом.
Чтобы исправить, вы можете добавить другие fontFamily или поставить 2 пробела перед словом, кажется, это тоже работает.
См.: https://github.com/facebook/react-native/issues/15114

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

Установка textBreakStrategy на simple в текстовом элементе также работает для некоторых устройств, таких как Samsung Galaxy S10, Google Pixel

это действительно интересно. это происходит только с моим одним плюсом и беспокоит меня уже несколько дней. спасибо за указатель!

— 26.07.2019 08:14

Это решило проблему для устройств OnePlus и Samsung. Спасибо.

— 24.09.2020 17:12

Умная. Почему я не мог думать о пустом тексте?

— 14.10.2020 07:00

18.02.2019 16:41

Если вы удалите numberOfLines, он будет отображаться правильно. Если он по-прежнему не отображается, возможно, родительское представление имеет фиксированную высоту (или maxHeight).

18.02.2019 18:01

У меня была проблема с вырезанием текста по горизонтали. используя lineHeight для текстовых компонентов, и бум, моя проблема решена

17.09.2019 18:19

Как оказалось, последняя строка наших абзацев обрезалась из-за 'highQuality' значения параметра textBreakStrategy. Мы изменили это на 'simple', и теперь отображается весь наш текст. Судя по всему highQuality на самом деле низкое качество.

08.01.2020 22:24

Для тех, кто нашел предоставленные решения, не работающие, как в моем случае вот мое решение для вырезания текста на телефонах OnePlus:

просто установите стиль компонента с этими свойствами

alignSelf: 'stretch',
textAlign: 'center',

это, вероятно, эквивалент настройки Android match_parent. Не проверял, как это повлияет на iOS, поскольку сейчас у меня нет такой возможности.

14.01.2020 16:29

Вы можете исправить это, добавив дополнительный пробел в конце, который равен не хороший обходной путь.

Рекомендуемые: Включите семейство шрифтов по умолчанию в ваше приложение, и оно будет одинаково работать на всех устройствах.

03.04.2020 12:41

После долгой борьбы с этим я, наконец, понял это.

Похоже, что по умолчанию Text устанавливает для свойства textBreakСтратегия значение *highQuality*.

Изменение его на * простое * решило мою проблему.

Ссылка здесь: https://reactnative.dev/docs/0.56/text#textbreakstrategy

09.04.2020 21:36

В моем случае добавление fontFamily: 'arial' к текстовому компоненту помогло. Даже fontFamily: 'abc' тоже работает. Я думаю, что для этого просто нужно установить fontFamily.

05.08.2020 17:10

Добавление дополнительного пространства или добавление textBreakStrategy как «простого» у меня не сработало.

Я добавил alignSelf:"stretch" для стиля компонента «Текст», и, наконец, это сработало. Если вы хотите, чтобы текст был в центре, просто добавьте textAlign: "center".

Надеюсь, это кому-то поможет.

06.08.2020 18:41

Есть и другие лучшие способы решить эту проблему. но в моем случае добавление custom font устранило проблему с вырезанием текста и выравниванием шрифта на разных устройствах.

Добавление пользовательского шрифта может легко решить проблему.

Как добавить пользовательские шрифты = проверить этот ответ StackOverflow

реактивные официальные документы по пользовательским шрифтам

06.02.2021 05:02

Добавление стиля flex: x к <View> вокруг вырезаемого элемента <Text> сработало для меня при использовании OnePlus 7T.

Flex: 1 работал на меня. Спасибо

— 30.11.2021 08:05

23.02.2021 10:52

попробуй это.