# react-native: Смена языка
URL: https://generaltranslation.com/ru/docs/react-native/guides/languages.mdx
---
title: Смена языка
description: Как настроить несколько языков и переключаться между ними в приложении React Native
---

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

Переключение языка позволяет пользователям менять предпочтительную локаль контента в вашем приложении. GT React Native предлагает несколько вариантов — от простого программного переключения до готовых компонентов интерфейса для создания собственных переключателей языка.


## Доступные методы

* **Программно**: хук [`useSetLocale`](/docs/react-native/api/helpers/use-set-locale) для пользовательских элементов управления
* **Готовый UI**: компонент [`<LocaleSelector>`](/docs/react-native/api/components/locale-selector) с выпадающим списком
* **Пользовательский UI**: хук [`useLocaleSelector`](/docs/react-native/api/helpers/use-locale-selector) для создания собственных селекторов

## Использование хука `useSetLocale`

Хук [`useSetLocale`](/docs/react-native/api/helpers/use-set-locale) позволяет изменить язык приложения:

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

export default function MyComponent() {
  const setLocale = useSetLocale();

  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}
```

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


## Использование компонента `<LocaleSelector>`

Компонент [`<LocaleSelector>`](/docs/react-native/api/components/locale-selector) предоставляет готовый выпадающий список, в котором автоматически отображаются все настроенные локали:

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

export default function MyComponent() {
  return <LocaleSelector />;
}
```

Этот компонент автоматически:

* Показывает все настроенные для вашего проекта локали
* Отображает локали под их самоназваниями
* Обрабатывает переключение
* Сохраняет текущее состояние выбора


## Использование хука `useLocaleSelector`

Если вы хотите создать собственный компонент для выбора локали, используйте [`useLocaleSelector`](/docs/react-native/api/helpers/use-locale-selector):

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

function CustomLocaleSelector() {
  const { 
    locale,              // Текущая активная локаль (например, 'en', 'es')
    locales,             // Массив локалей, поддерживаемых вашим проектом ['en', 'es', 'fr']
    setLocale,           // Функция для смены локали: setLocale('es')
    getLocaleProperties  // Функция для получения отображаемой информации о локали
  } = useLocaleSelector();
  
  if (!locales?.length) return null;
  
  return (
    <select 
      value={locale || ''} 
      onChange={(e) => setLocale(e.target.value)}
    >
      {locales.map((loc) => {
        const props = getLocaleProperties(loc);
        return (
          <option key={loc} value={loc}>
            {props.nativeNameWithRegionCode} {/* например, "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}
```

## Важные примечания

### Требование к GTProvider

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

```tsx
// ✅ Правильно
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

// ❌ Неправильно — вне провайдера
<LanguageSwitcher />
```


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

* [Руководство по динамическому контенту](/docs/key-concepts/dynamic-content) - Перевод контента во время выполнения
* Справка по API:
  * [`useSetLocale` хук](/docs/react-native/api/helpers/use-set-locale)
  * [`<LocaleSelector>` Компонент](/docs/react-native/api/components/locale-selector)
  * [`useLocaleSelector` хук](/docs/react-native/api/helpers/use-locale-selector)