# react-native: Локальное хранилище переводов
URL: https://generaltranslation.com/ru/docs/react-native/guides/local-tx.mdx
---
title: Локальное хранилище переводов
description: Храните переводы в бандле приложения вместо использования CDN
---

{/* СГЕНЕРИРОВАНО АВТОМАТИЧЕСКИ: Не редактируйте напрямую. Вместо этого измените шаблон в content/docs-templates/. */}


## Что такое локальные переводы?

Локальные переводы хранятся в бандле приложения, а не загружаются из CDN (Content Distribution Network). Когда вы добавляете команду `gt translate` в процесс сборки, она генерирует переводы в формате JSON. Последний шаг — поместить эти переводы в приложение, чтобы их можно было использовать.

Сделать это можно двумя способами:

1. **В бандле приложения** (локально): сохранить переводы в бандле приложения после генерации
2. **В CDN** (по умолчанию): загружать переводы из CDN во время выполнения

По умолчанию `gt-react-native` загружает переводы из CDN General Translation. Когда вы переводите приложение с помощью нашего API, переводы автоматически сохраняются в нашем CDN.

<Callout>
  **Поведение по умолчанию:** GT по умолчанию использует CDN. Переходите на локальное хранение, только если вам действительно нужны его преимущества.
</Callout>

## Компромиссы

### Преимущества локальных переводов

* **Более быстрая загрузка**: локальные переводы отдаются напрямую из вашего приложения и загружаются быстрее, чем переводы, получаемые через CDN
* **Без зависимости от внешних сервисов**: загрузка переводов в вашем приложении не зависит от доступности CDN. Если для локали переводы не найдены, приложение автоматически использует язык по умолчанию
* **Работает офлайн**: переводы включены в сборку приложения

### Недостатки локальных переводов

* **Увеличение размера бандла**: Локальные переводы увеличивают размер бандла приложения, из-за чего оно может медленнее загружаться при первом запуске
* **Управление контентом**: Чтобы изменить перевод, вам придется заново развертывать приложение с обновленным переводом при каждом изменении

## Настройка

### Шаг 1: Создайте функцию загрузки

Добавьте файл `loadTranslations.[js|ts]` в каталог `./src` со следующим содержимым:

```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
  const t = await import(`./_gt/${locale}.json`);
  return t.default;
}
```


### Шаг 2: Настройте GTProvider

Передайте `loadTranslations` в компонент [`<GTProvider>`](/docs/react-native/api/components/gtprovider) через prop:

```tsx title="src/App.tsx"
import { GTProvider } from 'gt-react-native';
import loadTranslations from './loadTranslations';

export default function App() {
  return (
    <GTProvider loadTranslations={loadTranslations} locales={['es', 'fr']}>
      <YourApp />
    </GTProvider>
  );
}
```


### Шаг 3: Настройте CLI

Запустите команду конфигурации и выберите локальное хранилище:

```bash
npx gt configure
```

Когда появится запрос:

* **Save to CDN?** Выберите &quot;No&quot;
* **Translation directory:** CLI автоматически использует `./src/_gt`

Либо вы можете вручную настроить файл `gt.config.json` для использования локальных переводов. Подробнее см. в [документации по конфигурации CLI](/docs/cli/reference/config).


### Шаг 4: Сгенерируйте переводы

Теперь при запуске команды `translate` переводы будут автоматически загружаться и включаться в ваш код:

```bash
npx gt translate
```

Переводы будут храниться в `src/_gt/` и включаться в бандл приложения.


## Интеграция со сборкой

### Процесс сборки React

Добавьте генерацию переводов в скрипт сборки:

```json
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```


### Пайплайн CI/CD

```yaml
# .github/workflows/deploy.yml
- name: Generate Translations
  run: npx gt translate
  
- name: Build Application  
  run: npm run build
```


## Распространённые проблемы

### Отсутствуют файлы переводов

Перед сборкой убедитесь, что переводы сгенерированы:

```bash
# ❌ Сборка без переводов
<...YOUR_BUILD_COMMAND...>

# ✅ Сначала сгенерируйте переводы
npx gt translate && <...YOUR_BUILD_COMMAND...>
```


### Ошибки в пути импорта

Приведите структуру каталогов в функции load в соответствие с вашей:

```ts
// ❌ Неверный путь
const t = await import(`../translations/${locale}.json`);

// ✅ Правильный путь для src/_gt
const t = await import(`./_gt/${locale}.json`);
```


### Большой размер бандла

Для приложений с большим количеством языков рассмотрите разделение кода:

```ts
// Загружать переводы только по необходимости
export default async function loadTranslations(locale: string) {
  // Загружать только если локаль активна
  if (locale === getCurrentLocale()) {
    const translations = await import(`./_gt/${locale}.json`);
    return translations.default;
  }
  return {};
}
```

<Callout>
  Локальное хранилище лучше всего подходит для приложений со стабильными переводами, которые не нужно часто обновлять.
</Callout>


## Что дальше

* [Руководство по языкам](/docs/react-native/guides/languages) — Настройте поддерживаемые языки