До недавнего времени при работе со стилизованными компонентами в моих приложениях React Native я определял все свои текстовые компоненты для каждой необходимой конфигурации в одном файле, например так:

Этот способ сделать это довольно громоздким, потому что:

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

Итак, недавно я начал писать динамически настраиваемые текстовые компоненты.

Функция TextComponents принимает объект, содержащий параметры конфигурации для нужных текстовых компонентов. Затем он создает ключ для этого конкретного текстового компонента, просто объединяя все переданные значения параметров в строку key. Эта строка key используется для проверки того, был ли уже создан компонент с таким же key и существует ли он в объекте components. Если это так, этот компонент возвращается. Если нет, создаем новый компонент, сохраняем его в объекте components и возвращаем.

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

Использование текстовых компонентов

Функцию можно использовать, передав параметры конфигурации шрифта как объект. Взгляните на следующий фрагмент, чтобы увидеть, как динамически генерировать и использовать текстовый компонент с функцией TextComponents.

Первоначально опубликовано на celsiusnotes.com 10 апреля 2019 г.