# react-native: useTranslations
URL: https://generaltranslation.com/zh/docs/react-native/api/dictionary/use-translations.mdx
---
title: useTranslations
description: useTranslations Hook 的 API 参考文档
---

{/* 自动生成：请勿直接编辑。请改为编辑 content/docs-templates/ 中的 template。 */}


## 概述

`useTranslations` 用于从[翻译字典](/docs/react-native/guides/dictionaries)中获取字符串的翻译。

它必须在由[`<GTProvider>`](/docs/react-native/api/components/gtprovider)包裹的组件内使用。

```jsx
const t = useTranslations(); // 获取翻译函数
t('greeting.hello'); // 传入 id 以获取翻译
```

<Callout>
  `useTranslations` 使用[字典](/docs/react-native/guides/dictionaries)存储所有待翻译内容。
  这与使用[`<T>` 组件](/docs/react-native/guides/t)进行翻译的方式不同。
  如果你只打算使用 `<T>` 组件进行翻译，那么本文档不适用。
</Callout>


## 参考

### 参数

<TypeTable
  type={{
  "id?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 说明

| Prop | 说明                              |
| ---- | ------------------------------- |
| `id` | 可选前缀，会添加到所有翻译键前面。这在处理嵌套字典值时很有用。 |

### 返回值

一个翻译函数 `d`，给定 `id` 后，会返回对应条目的译文

```jsx
(id: string, options?: DictionaryTranslationOptions) => React.ReactNode
```

| 名称         | 类型                                                                                            | 说明                 |
| ---------- | --------------------------------------------------------------------------------------------- | ------------------ |
| `id`       | `string`                                                                                      | 待翻译条目的 `id`        |
| `options?` | [`DictionaryTranslationOptions`](/docs/react-native/api/types/dictionary-translation-options) | 用于自定义 `d` 行为的翻译选项。 |

***


## 示例

### 字典的基本用法

字典中的每个条目都会被翻译。

```jsx title="dictionary.jsx" copy
const dictionary = {
  greeting: "Hello, Bob", // [!code highlight]
};
export default dictionary;
```

当你需要访问这些条目时，可以调用 `useTranslations`。
它会返回一个函数，用于接收字典中的翻译键。

你必须将字典传给 `GTProvider` 组件。

```jsx title="TranslateGreeting.jsx" copy
import { useTranslations } from 'gt-react-native';
import dictionary from "./dictionary.json"

export default function TranslateGreeting() {
  const t = useTranslations(); // [!code highlight]
  return (
    <GTProvider dictionary={dictionary}>
      <p>
        {t('greeting')} // [!code highlight]
      </p>
    </GTProvider>
  );
}
```


### 使用变量 [#variables]

要传递值，你必须：(1) 指定一个标识符，以及 (2) 在调用 `d` 函数时引用该标识符。

在这个示例中，我们使用 `{}` 将变量传入翻译内容。
在字典中，我们将 `{userName}` 指定为标识符。

```jsx title="dictionary.jsx" copy
// [!code word:userName]
const dictionary = {
  greeting: "Hello, {userName}!", // [!code highlight]
};
export default dictionary;
```

```jsx title="TranslateGreeting.jsx" copy
// [!code word:userName]
import { useTranslations } from 'gt-react-native';

export default function TranslateGreeting() {
  const t = useTranslations();
  
  // 你好，Alice！
  const greetingAlice = t('greeting', { userName: "Alice" }); // [!code highlight]

  return (
    <p>
      {greetingAlice} // 你好，Alice // [!code highlight]
    </p>
  );
}
```


### 使用前缀

我们可以使用前缀，仅翻译字典中的一部分内容。

```jsx title="dictionary.jsx" copy
const dictionary = {
  prefix1: { // [!code highlight]
    prefix2: { // [!code highlight]
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;
```

由于我们在 `useTranslations` Hook 中添加了值 `'prefix1.prefix2'`，所以所有键都会带有 `prefix1.prefix2` 前缀：

```jsx title="UserDetails.jsx" copy
import { useTranslations } from 'gt-react-native';

export default function UserDetails() {
  const t = useTranslations('prefix1.prefix2'); // [!code highlight]
  return (
    <div>
      <p>{t('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}
```

***


## 说明

* `useTranslations` 函数可让你访问字典中的翻译。
* `useTranslations` Hook 只能在由 [`<GTProvider>` 组件](/docs/react-native/api/components/gtprovider) 包裹的组件中使用。

## 后续步骤