# react-native: useMessages
URL: https://generaltranslation.com/zh/docs/react-native/api/strings/use-messages.mdx
---
title: useMessages
description: useMessages() 字符串翻译函数的 API 参考文档
---

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


## 概述

`useMessages` 函数是一个 Hook，用于在构建时翻译来自 `msg` 的已编码字符串。

```jsx
const m = useMessages();

<p>{m(encodedString)}</p>;
```

<Callout>
  **构建时翻译：** `useMessages` 的翻译发生在构建时，
  也就是在应用部署之前。你可以传入由 `msg` 编码的字符串，它们会
  被翻译成用户的首选语言。
</Callout>


## 参考文档

### 参数

无

### 返回值

一个回调函数 `m`，用于翻译 `msg` 提供的已编码内容。

```jsx
(encodedContent: string, options?: Record<string, any>) => string
```

| 名称               | 类型                    | 说明                     |
| ---------------- | --------------------- | ---------------------- |
| `encodedContent` | `string`              | 来自 `msg` 的待翻译已编码字符串内容。 |
| `options?`       | `Record<string, any>` | 可选参数，用于向已编码字符串传入变量。    |

***


## 行为

### 生产环境

在持续部署 (CD) 过程中，`msg` 函数中的任何内容都会在应用部署前完成翻译。
这样可以确保所有区域设置下都具备较快的加载速度，但它只能翻译在构建时已知的内容。

翻译生成后，会根据你的设置以两种方式之一存储： (1) 存储在 CDN 中，或 (2) 存储在应用的构建产物中。
之后，这些已翻译的内容会提供给用户。
如果找不到对应的翻译，则会回退为原始内容。

请务必参阅并遵循[此处的部署指南](/docs/react-native/tutorials/quickdeploy)。

### 开发

在开发过程中，`m` 函数会按需 (按需) 翻译内容。
这很适合用来快速查看应用在不同语言下的大致效果。
请记得在环境变量中添加 Dev API 键，以启用此行为。

在开发环境中进行 按需 翻译时，你会看到一定延迟。
在生产构建中，除非内容被明确设置为 按需 翻译，否则不会出现这种情况。

***

## 示例

### 基本用法

你可以使用 `useMessages` 翻译由 `msg` 编码的字符串。

```jsx copy
import { msg, useMessages } from 'gt-react-native';

const encodedGreeting = msg('Hello, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return <p>{m(encodedGreeting)}</p>;
}
```

注意：&quot;Alice&quot; 会被翻译成用户的首选语言。


### 使用变量 [#variables]

你可以向编码后的字符串传递变量。

```jsx copy
import { msg, useMessages } from 'gt-react-native';

const encodedGreeting = msg('Hello, {name}!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}{' '}
      {/* 这将显示 "Hello, Bob!" */}
    </p>
  );
}
```


### `msg` 变量会覆盖 `m` 变量

当你同时向 `msg` 和 `m` 传入变量时，传给 `msg` 的变量会覆盖传给 `m` 的变量。

```jsx copy
import { msg, useMessages } from 'gt-react-native';

const encodedGreeting = msg('Hello, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedGreeting, { name: 'Bob' })}</p>;
}
```

注意：这将显示 &quot;Hello, Alice!&quot;——变量不会在渲染时被覆盖。


### 使用 ICU 消息格式

`gt-react-native` 支持 ICU 消息格式，因此你也可以对变量进行格式化。

```jsx copy
import { msg, useMessages } from 'gt-react-native';

const encodedMessage = msg(
  'There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart',
  { count: 10 }
);

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedMessage)}</p>;
}
```

<Callout>
  ICU 消息格式是格式化变量的一种强大方式。更多
  信息请参阅 [ICU 消息格式
  文档](https://unicode-org.github.io/icu/userguide/format_parse/messages/)。
</Callout>


### 从 `gt-react-native` 导入

如果使用了 `"use client"` 指令，应从 `gt-react-native` 导入，而不是 `gt-react-native`。

```jsx copy
'use client';
import { msg, useMessages } from 'gt-react-native';

const encodedGreeting = msg('Hello, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return <p>{m(encodedGreeting)}</p>;
}
```

***


## 注意事项

* `useMessages` 函数是一个 Hook，用于翻译由 `msg` 编码的字符串。
* 通过 `useMessages` 翻译字符串会在 runtime 之前的构建时过程中完成 (开发环境除外) 。

## 后续步骤

* 请参阅 [`msg`](/docs/react-native/api/strings/msg)，了解如何将字符串编码为可翻译内容。