Текстовый компонент React Native fit

Я пытаюсь поместить свой текст в доступную область, и мои ограничения выглядят примерно так:

  • Текст не должен переполняться,
  • Текст должен масштабироваться во всех доступных представлениях,
  • Слова не должны разбиваться на символы и могут переходить на следующую строку предложения,
  • Когда я использую flex внутри родительского представления, текст не должен расширять представление больше, чем ширина экрана по горизонтали.

Вот мой фрагмент кода:

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { Font } from "expo";
import Lorem from "./src/helpers/lorem-ipsum-gen";

export default class App extends React.Component {
  constructor() {
    super()
    this.state = {
      fontLoaded: false,
    };
  }
  //theboldfont.ttf
  async componentWillMount() {
    await Font.loadAsync({
      "akzidenz-grotesk-bq-bold": require("./assets/fonts/AkzidenzGrotesk_BQ_Bold.otf"),
    });
    this.setState({ fontLoaded: true });
  }

  render() {
    let loremText = new Lorem().generate(20)

    return (
      <View style={styles.container}>
        <View>
          <View style={{ flex: 0.37 }} > </View>
          <View style={{ flex: 0.25, backgroundColor: "red" }} >
            <View >
              {
                this.state.fontLoaded ? (<Text
                  style={{ fontFamily: "akzidenz-grotesk-bq-bold", fontSize: 50 }}
                  adjustsFontSizeToFit={true}
                >
                  {loremText}
                </Text>) : null
              }

            </View>
          </View>
          <View style={{ flex: 0.38 }} >
            <Text>
              {loremText}
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

И результат этого:

пример скриншота

Что я пытался достичь своей цели:

  • Я думал, что это связано с пользовательским шрифтом и изменен на шрифт по умолчанию (не работает)
  • В некоторых проблемах с github люди писали AdjustsFontSizeToFit={true} внутри свойства стиля текста (не работает)
  • Я пробовал allowFontScaling (не работает)
  • Убран размер шрифта (не работает)
  • Удалены flex и установлены статические ширина и высота для просмотра (не работает)
  • Комбинации всех вышеперечисленных шагов (не работает)

react-native javascript fonts expo flexbox
person Batu G.    schedule 21.04.2018    source источник
comment
Пожалуйста, проверьте этот метод stackoverflow.com/a/58823271/7088662   -  person Jeffy Lee    schedule 12.11.2019

Ответы (2)


arrow_upward
6
arrow_downward

Поэтому, попробовав новые вещи в текстовом компоненте, я обнаружил, что adjustsFontSizeToFit={true} не работает без указания numberOfLines={number}, однако иногда он делит мои слова на символы в конце строки. И из документов, вероятно, это недоступно в Android. Так что мне все еще нужен лучший способ найти решение моей проблемы

person Batu G.    schedule 21.04.2018

arrow_upward
0
arrow_downward

Примечание: это решение основано на пробах и ошибках и предполагает наличие контейнера фиксированного размера.

Вы можете использовать функцию интерполяции для уменьшения текста на основе длины самой длинной строки.

Пример функции интерполяции (можно взять мою функцию интерполяции):

const fontSizeInterpolator = Interpolator.getInterpolator({
    input:  [4,  5,  6,  7,  8,  10, 11, 13, 40],
    output: [45, 45, 32, 28, 28, 22, 19, 15, 10]
});

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

Найдите самую длинную строку в тексте с помощью обычной логики (здесь у меня есть только одно слово в строке):

const words = props.text.split(' ');
let longestWord = words[0];
for (const word of words) {
  if (word.length > longestWord.length) {
    longestWord = word;
  }
}

Затем получите размер шрифта из интерполятора:

const fontSize = fontSizeInterpolator(longestWord.length);

Пример вывода:

пример вывода

person Jared Beach    schedule 23.02.2020