React Native интеграция

Globalize используется в средах, где стандартная реализация Intl может быть неполной или нестабильной. В контексте React Native это особенно актуально из-за различий между платформами Android и iOS, а также особенностей JavaScript-движков Hermes и JSC.

Основная проблема интернационализации в React Native заключается в непредсказуемом уровне поддержки Intl API. В зависимости от версии рантайма и сборки приложения могут отсутствовать корректные реализации Intl.NumberFormat, Intl.DateTimeFormat, Intl.PluralRules. Это приводит к необходимости использования полноценного i18n-слоя, который не зависит от встроенных возможностей среды выполнения.

Globalize решает эту задачу через использование CLDR-данных (Unicode Common Locale Data Repository) и собственных форматтеров. В React Native это позволяет стандартизировать поведение локализации между платформами.

Архитектурная роль Globalize в React Native приложении

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

  • не опирается на Intl или использует его только как опциональный ускоритель;
  • работает на основе заранее загруженных CLDR-данных;
  • обеспечивает одинаковый результат форматирования на Android и iOS;
  • позволяет контролировать размер бандла и загрузку локалей.

CLDR-данные становятся центральным элементом архитектуры. Они включают:

  • правила форматирования чисел;
  • правила плюрализации;
  • форматы дат и времени;
  • данные валют;
  • локализованные шаблоны.

В React Native эти данные обычно включаются в бандл частично, чтобы избежать чрезмерного увеличения размера приложения.

Подготовка CLDR для мобильной среды

CLDR-данные не используются напрямую в сыром виде. Они предварительно преобразуются в JSON-модули, которые затем импортируются в приложение.

Типичная структура:

  • cldr-core/supplemental/
  • cldr-numbers-full/
  • cldr-dates-full/

В React Native важным аспектом является минимизация набора локалей. Полная загрузка всех CLDR-данных приводит к значительному увеличению размера приложения.

Практика заключается в формировании набора:

  • базовой локали (например, en);
  • одной или нескольких целевых локалей (ru, de, kk);
  • минимального набора supplemental-данных.

Инициализация Globalize в React Native

Инициализация выполняется синхронно или асинхронно в зависимости от стратегии загрузки ресурсов.

Основные этапы:

  1. загрузка CLDR JSON;
  2. установка данных через Globalize.load();
  3. установка локали через Globalize.locale();
  4. создание экземпляров форматтеров.

В React Native часто используется статическая инициализация, поскольку динамическая загрузка локалей требует дополнительной инфраструктуры (файловая система, remote config или bundling через Metro).

Работа с числовыми форматами

Форматирование чисел в мобильных приложениях критично из-за различий в:

  • разделителях тысяч;
  • десятичном разделителе;
  • форматах валют;
  • отображении процентов.

Globalize реализует единый слой поверх CLDR:

  • числовое форматирование;
  • валютное форматирование;
  • процентное представление.

Особенность React Native заключается в необходимости избегать частых пересозданий форматтеров. Объекты форматирования кэшируются, поскольку их создание связано с обработкой CLDR-данных.

Форматирование дат и времени

В мобильной среде существует различие между системным временем устройства и локалью приложения. Globalize устраняет это расхождение за счет собственных шаблонов.

Ключевые аспекты:

  • использование CLDR skeletons;
  • поддержка относительных форматов (через дополнительную логику);
  • единообразие между Android и iOS.

React Native не гарантирует одинаковое поведение Date.toLocaleString(), поэтому Globalize применяется как слой детерминированного форматирования.

Плюрализация и языковые правила

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

CLDR предоставляет правила категорий:

  • one;
  • few;
  • many;
  • other.

Globalize интерпретирует эти правила и применяет их независимо от платформы. В React Native это особенно важно, так как встроенные реализации Intl.PluralRules могут отсутствовать или работать неконсистентно.

Интеграция с архитектурой state management

В приложениях React Native локализация обычно связана с глобальным состоянием:

  • Redux;
  • Zustand;
  • MobX;
  • Context API.

Globalize не привязан к конкретной архитектуре состояния и используется как чистая функция форматирования. Это позволяет:

  • хранить текущую локаль в store;
  • пересоздавать форматтеры при смене языка;
  • централизованно управлять CLDR-данными.

Проблемы производительности в React Native

Основные узкие места:

  • загрузка CLDR JSON;
  • создание экземпляров Globalize;
  • повторное форматирование в списках.

Оптимизации включают:

  • мемоизацию форматтеров;
  • предсоздание инстансов для часто используемых локалей;
  • lazy-loading редких языков;
  • разделение CLDR по чанкам через Metro bundler.

Особое внимание требуется FlatList и SectionList, где форматирование вызывается массово при рендере.

Работа с Hermes и JavaScriptCore

В Hermes:

  • отсутствует полноценный ICU в некоторых конфигурациях;
  • Intl может быть частично урезан;
  • наблюдается стабильное выполнение чистого JS-кода Globalize.

В JavaScriptCore:

  • чаще присутствует базовый Intl;
  • возможны различия в форматировании дат и валют.

Globalize нивелирует эти различия, поскольку не зависит от ICU runtime.

Подключение в Metro bundler

Metro требует корректной обработки JSON и больших наборов данных CLDR.

Особенности:

  • CLDR JSON импортируется как обычные модули;
  • требуется следить за кэшированием;
  • иногда используется разделение на отдельные пакеты локалей.

Структура модулей может быть организована следующим образом:

  • /i18n/cldr/
  • /i18n/globalize/
  • /i18n/locales/

Динамическая смена локали

Смена языка в React Native требует:

  • перезагрузки форматтеров;
  • повторной инициализации Globalize;
  • обновления UI через state management.

Globalize не хранит реактивное состояние, поэтому смена локали реализуется внешним слоем.

При переключении языка:

  • обновляется Globalize.locale();
  • пересоздаются кэшированные форматтеры;
  • инициируется rerender интерфейса.

Работа с валютами и финансовыми данными

Форматирование валют в мобильных приложениях требует:

  • учета символа валюты;
  • позиции символа;
  • округления;
  • локальных правил отображения.

Globalize использует CLDR currency patterns, что обеспечивает единообразие отображения независимо от системных настроек устройства.

Ограничения и особенности использования

В React Native среде выделяются характерные ограничения:

  • увеличение размера бандла при полной локализации;
  • необходимость ручного управления CLDR;
  • отсутствие автоматической синхронизации с системной локалью;
  • необходимость кэширования форматтеров для производительности.

Несмотря на это, использование Globalize обеспечивает стабильность интернационализации в долгоживущих приложениях с большим количеством локалей и сложной бизнес-логикой отображения текста.

Оглавление