Реагировать на собственный размер шрифта, чтобы заполнить родительский

Question

Есть ли способ установить fontSize текста, чтобы он занимал все разборчивое пространство?

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

Answer 1

Я не знаю, является ли это лучшим ответом, но я думаю, что вы можете сделать это, используя React Native Dimensions API.

Посмотрите пример, который я создал в snack.expo.io. :

https://snack.expo.io/@luaneduardo / 19a766

Надеюсь, это поможет:)

Answer 2

Вы можете установить font-size: 100%

НО! Это 100% на основе родительского элемента font-size, а не на текущем элементе size.

Таким образом, если вы хотите, чтобы ваш шрифт заполнялся текущим элементом, вы можете использовать подход:

<div style={{fontSize: `800px`}}>
  <div style={{height: `800px`, fontSize: `100%`}}>
    Some Text
  </div>
</div>

И вы можете сделать это более программно, исходя из ваших требований.

---

См. Связанные QA: CSS: размер шрифта 100% - 100% чего?