# react-native: 切换语言
URL: https://generaltranslation.com/zh/docs/react-native/guides/languages.mdx
---
title: 切换语言
description: 如何在 React Native 应用中配置和切换语言
---

{/* 自动生成：请勿直接编辑。请在 content/docs-templates/ 中编辑模板。 */}

语言切换允许用户更改应用内容的首选区域设置。GT React Native 提供了多种实现方式，从简单的编程式切换到用于自定义语言选择器的预构建 UI 组件。


## 可用方法

* **编程方式**：用于自定义控件的 [`useSetLocale`](/docs/react-native/api/helpers/use-set-locale) Hook
* **预构建 UI**：带下拉菜单的 [`<LocaleSelector>`](/docs/react-native/api/components/locale-selector) 组件
* **自定义 UI**：用于构建自定义选择器的 [`useLocaleSelector`](/docs/react-native/api/helpers/use-locale-selector) Hook

## 使用 `useSetLocale` Hook

[`useSetLocale`](/docs/react-native/api/helpers/use-set-locale) Hook 可让你更改应用的语言：

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

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

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

只需将要切换到的区域设置作为参数传给该 hook 返回的函数即可。


## 使用 `<LocaleSelector>` 组件

[`<LocaleSelector>`](/docs/react-native/api/components/locale-selector) 组件提供了一个可直接使用的下拉菜单，会自动显示所有已配置的区域设置：

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

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

此组件会自动：

* 显示项目中所有已配置的区域设置
* 以各区域设置对应语言的本地名称显示
* 处理切换逻辑
* 保持当前选中状态


## 使用 `useLocaleSelector` Hook

如果你想构建自己的自定义区域设置选择器组件，请使用 [`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>

// ❌ 错误 - 在 provider 外部
<LanguageSwitcher />
```


## 后续步骤

* [动态内容指南](/docs/key-concepts/dynamic-content) - runtime 内容翻译
* API 参考：
  * [`useSetLocale` Hook](/docs/react-native/api/helpers/use-set-locale)
  * [`<LocaleSelector>` 组件](/docs/react-native/api/components/locale-selector)
  * [`useLocaleSelector` Hook](/docs/react-native/api/helpers/use-locale-selector)