# General Translation React SDKs (gt-react, gt-next): 管理区域设置 URL: https://generaltranslation.com/zh/docs/react/guides/managing-locales.mdx --- title: 管理区域设置 description: 介绍如何在 React、Next.js、TanStack Start 和 React Native 中使用 General Translation 让用户切换语言，并读取当前生效的区域设置。 related: links: - /docs/react/guides/translating-jsx - /docs/react/guides/translating-strings - /docs/react/guides/configuring - /docs/react/guides/storing-translations --- 你的应用需要声明支持哪些区域设置、让用户选择其中一种，并读取当前生效的区域设置来进行相应渲染。本指南将分别介绍这些内容。 ## 声明支持的区域设置 [#declare] 在 `gt.config.json` 中列出默认区域设置和目标区域设置。这些就是你的应用可切换的区域设置。 ```json title="gt.config.json" { "defaultLocale": "en", "locales": ["es", "fr", "de"] } ``` 在 React、TanStack Start 和 React Native 中，请将这些值传入初始化调用中。在 Next.js 中，`withGTConfig` 插件会自动读取 `gt.config.json`，因此无需手动初始化。各自的 setup 方式请参阅[配置 General Translation](/docs/react/guides/configuring)。 ## 添加语言切换器 [#switcher] 直接使用 [``](/docs/react/reference/components/locale-selector)，即可获得一个现成的下拉菜单，用于显示你支持的区域设置。用户选择某一项后，它会切换当前生效的区域设置。 ```tsx import { LocaleSelector } from 'gt-react'; ; ``` ```tsx import { LocaleSelector } from 'gt-next'; ; ``` ```tsx import { LocaleSelector } from 'gt-tanstack-start'; ; ``` *注意：React Native 不提供预构建的 `` 组件。请使用 [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) (或 [`useSetLocale`](/docs/react/reference/hooks/use-set-locale) 和 [`useLocales`](/docs/react/reference/hooks/use-locales)) 自行构建，如下所示。* 如果要自行构建切换器，请使用 `useSetLocale` 更改区域设置，并使用 `useLocales` 列出可选项。这些钩子在所有框架中都可用；请从对应框架的软件包中导入它们。 ```tsx import { useLocale, useLocales, useSetLocale } from 'gt-react'; function Switcher() { const locale = useLocale(); const locales = useLocales(); const setLocale = useSetLocale(); return ( ); } ``` *注意：更改区域设置后，所选项会被保留——Web 端 (React、Next.js、TanStack Start) 保存在 cookie 中，React Native 保存在原生存储中——并会重新加载，以显示新的翻译。* ## 读取当前生效的区域设置 [#read] 使用钩子在组件中读取区域设置状态： * [`useLocale`](/docs/react/reference/hooks/use-locale) 返回当前生效的区域设置代码。 * [`useDefaultLocale`](/docs/react/reference/hooks/use-default-locale) 返回源区域设置。 * [`useLocaleDirection`](/docs/react/reference/hooks/use-locale-direction) 返回 `'ltr'` 或 `'rtl'`，用于确定页面布局方向。 * [`useLocaleProperties`](/docs/react/reference/hooks/use-locale-properties) 返回某个区域设置的显示元数据，例如其名称。 *注意：`gt-tanstack-start` 目前不导出 `useLocaleDirection` 或 `useLocaleProperties`。请改用 `generaltranslation` 中的 `getLocaleProperties` 读取区域设置元数据。* 这些钩子可用于同步的 App Router 服务器组件。在异步 App Router 组件中，请改用 `gt-next/server` 提供的 [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) 和 [`getLocaleDirection`](/docs/react/nextjs/reference/functions/get-locale-direction)： ```tsx import { getLocale, getLocaleDirection } from 'gt-next/server'; async function Layout() { const locale = await getLocale(); const dir = await getLocaleDirection(); return ; } ``` *注意：在 Next.js 中，请求期间的区域设置检测和持久化由中间件处理，详见 Next.js 框架页面。* 完整列表请参阅 [Hooks 参考](/docs/react/reference/hooks/use-locale)。 ## Next steps - /docs/react/guides/translating-jsx - /docs/react/guides/translating-strings - /docs/react/guides/configuring - /docs/react/guides/storing-translations