# react-native: Обзор
URL: https://generaltranslation.com/ru/docs/react-native/introduction.mdx
---
title: Обзор
description: Обзор SDK React Native от General Translation
---

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


## Введение

General Translation React Native SDK — это библиотека интернационализации (i18n) с открытым исходным кодом для приложений React Native.

Она предоставляет полный набор инструментов, которые позволяют просто и удобно сопровождать интернационализацию вашего приложения React Native, сохраняя паритет возможностей с другими популярными библиотеками i18n.

SDK можно использовать автономно, без платформы General Translation, и в этом режиме он работает так же, как другие библиотеки i18n.

Однако он также интегрируется с нашей платформой и предоставляет дополнительные возможности:

* Горячая перезагрузка переводов в процессе разработки
* Автоматический перевод с помощью ИИ
* Синхронизация переводов с платформой General Translation
* Нативная интеграция с нашим CDN для переводов

## Концепции

При работе с SDK важно понимать 5 основных концепций.

<Steps>
  <Step>
    Компонент [`<GTProvider>`](/docs/react-native/api/components/gtprovider)
  </Step>

  <Step>
    Компонент [`<T>`](/docs/react-native/api/components/t)
  </Step>

  <Step>
    Хук [`useGT`](/docs/react-native/api/strings/use-gt)
  </Step>

  <Step>
    Функция [`msg`](/docs/react-native/api/strings/msg) для общих строк
  </Step>

  <Step>
    (Необязательно) Хук [`useTranslations`](/docs/react-native/api/dictionary/use-translations)
  </Step>
</Steps>

## Компонент `<GTProvider>`

Компонент [`<GTProvider>`](/docs/react-native/api/components/gtprovider) предоставляет приложению контекст перевода, включая текущий язык и связанные с ним переводы.

```tsx
import { GTProvider } from 'gt-react-native';

function App() {
  return (
    <GTProvider>
      <div>
        {/* Содержимое вашего приложения */}
      </div>
    </GTProvider>
  );
}
```

**Важно:** Провайдер должен оборачивать всё приложение и располагаться как можно выше в дереве компонентов — например, в корневом компоненте App.

Подробнее см. в [справочнике API `GTProvider`](/docs/react-native/api/components/gtprovider).


## Компонент `<T>`

Компонент [`<T>`](/docs/react-native/api/components/t) — рекомендуемый способ перевода содержимого в вашем приложении.

Это React-компонент, который можно использовать для обёртывания любого JSX-элемента; он автоматически отображает содержимое элемента на поддерживаемом языке.

<Callout type="info">
  По возможности рекомендуем использовать компонент [`<T>`](/docs/react-native/api/components/t), поскольку он даёт наибольшую гибкость при переводе.

  В отличие от строк, компонент [`<T>`](/docs/react-native/api/components/t) можно использовать для перевода HTML-содержимого, что делает его гораздо мощнее обычного перевода строк.
</Callout>

### Примеры

```tsx
<T>
  <div>Hello, world!</div>
</T>
```

```tsx
<T>
  <div>
    <h1> Here is an image </h1>
    <img src="https://example.com/image.png" alt="Example" />
  </div>
</T>
```

```tsx
<T>
  Formatting can be done easily with the `<T>` component.
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency currency="USD">{1000}</Currency>
</T>
```

Компонент [`<T>`](/docs/react-native/api/components/t) работает с [переменными компонентами](/docs/react-native/guides/variables), такими как [`<Num>`](/docs/react-native/api/components/num), [`<DateTime>`](/docs/react-native/api/components/datetime) и [`<Currency>`](/docs/react-native/api/components/currency), для форматирования динамического содержимого.

См. [руководство по компоненту `<T>`](/docs/react-native/guides/t), чтобы узнать о разных способах использования компонента [`<T>`](/docs/react-native/api/components/t).


## Хук `useGT`

Хук [`useGT`](/docs/react-native/api/strings/use-gt) — это хук React, который можно использовать аналогично компоненту [`<T>`](/docs/react-native/api/components/t), но с определёнными ограничениями.

Хук возвращает функцию для перевода строк.

```tsx
const gt = useGT();

gt('Hello, world!');
```

По сравнению с компонентом [`<T>`](/docs/react-native/api/components/t), хук [`useGT`](/docs/react-native/api/strings/use-gt) дает больше гибкости в кодовой базе.

Например, если у вас сложная структура данных с вложенными строками, использовать компонент [`<T>`](/docs/react-native/api/components/t) будет сложнее.

```tsx
const gt = useGT();
const data = {
  title: gt('Hello, world!'),
  description: gt('This is a description'),
};
```

Подробнее см. руководство [strings](/docs/react-native/guides/strings), чтобы больше узнать о хуке [`useGT`](/docs/react-native/api/strings/use-gt).


## Функция `msg`

Функция [`msg`](/docs/react-native/api/strings/msg) используется, чтобы помечать для перевода строки, которые используются в нескольких компонентах или хранятся в объектах конфигурации.

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

```tsx
// Пометить строки для перевода
import { msg } from 'gt-react-native';

const navItems = [
  { label: msg('Home'), href: '/' },
  { label: msg('About'), href: '/about' },
  { label: msg('Contact'), href: '/contact' }
];
```

```tsx
// Декодируем и используем помеченные строки
import { useMessages } from 'gt-react-native';

function Navigation() {
  const m = useMessages();
  
  return (
    <nav>
      {navItems.map(item => (
        <a key={item.href} href={item.href}>
          {m(item.label)}
        </a>
      ))}
    </nav>
  );
}
```

Функция [`msg`](/docs/react-native/api/strings/msg) кодирует строки с метаданными перевода, а [`useMessages`](/docs/react-native/api/strings/use-messages) их декодирует.

<Callout type="info">
  Используйте [`msg`](/docs/react-native/api/strings/msg) для общего контента, который должен переводиться единообразно во всём приложении. Для контента, относящегося к конкретному компоненту, лучше использовать [`<T>`](/docs/react-native/api/components/t) или [`useGT`](/docs/react-native/api/strings/use-gt).
</Callout>

Подробнее см. в руководстве [Общие строки](/docs/react-native/guides/shared-strings), чтобы узнать больше о функции `msg`.


## Хук `useTranslations`

Хук [`useTranslations`](/docs/react-native/api/dictionary/use-translations) — это React-хук, который возвращает функцию для получения переводов по заданному ключу.

```tsx title="dictionary.ts"
const dictionary = {
  hello: {
    world: 'Hello, world!',
  },
};
```

```tsx title="App.tsx"
const translate = useTranslations();
translate('hello.world');
```

Это поведение похоже на поведение других библиотек перевода, таких как [`react-i18next`](https://react.i18next.com/) и [`next-intl`](https://next-intl-docs.vercel.app/).

<Callout type="warn">
  Мы не рекомендуем использовать хук [`useTranslations`](/docs/react-native/api/dictionary/use-translations) в приложении. Частое использование хука [`useTranslations`](/docs/react-native/api/dictionary/use-translations) усложняет поддержку кодовой базы
  и приводит к значительному техническому долгу.

  Вместо этого мы рекомендуем использовать компонент [`<T>`](/docs/react-native/api/components/t) или хук [`useGT`](/docs/react-native/api/strings/use-gt).

  Если вы переходите с другой библиотеки i18n, хук [`useTranslations`](/docs/react-native/api/dictionary/use-translations) можно использовать как drop-in replacement; это может быть полезно для поэтапной миграции кодовой базы.
</Callout>

Подробнее о хуке [`useTranslations`](/docs/react-native/api/dictionary/use-translations) см. в руководстве [dictionaries](/docs/react-native/guides/dictionaries).

Дополнительные сведения см. в [справочнике API useTranslations](/docs/react-native/api/dictionary/use-translations).

***


## Следующие шаги

* Узнайте, как настроить проект React Native с помощью SDK: [Быстрый старт](/docs/react-native)
* Узнайте, как переводить содержимое JSX с помощью компонента [`<T>`](/docs/react-native/api/components/t): [Руководство по переводу JSX](/docs/react-native/guides/t)
* Узнайте, как переводить строки с помощью хука [`useGT`](/docs/react-native/api/strings/use-gt): [Руководство по переводу строк](/docs/react-native/guides/strings)
* Узнайте, как работать с общими строками с помощью функции [`msg`](/docs/react-native/api/strings/msg): [Руководство по общим строкам](/docs/react-native/guides/shared-strings)