# react-native: 变量组件
URL: https://generaltranslation.com/zh/docs/react-native/guides/variables.mdx
---
title: 变量组件
description: 如何使用变量组件在翻译中插入动态内容
---

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

变量组件可让你在 [`<T>`](/docs/react-native/api/components/t) 组件中安全地插入动态内容。它们会在本地完成格式化和本地化处理，无需将数据发送到翻译 API，因此非常适合用于用户名、账号和财务数据等敏感信息。


## 可用组件

* [`<Var>`](/docs/react-native/api/components/var): 不经格式化的原始动态内容
* [`<Num>`](/docs/react-native/api/components/num): 按区域设置格式化的数字
* [`<Currency>`](/docs/react-native/api/components/currency): 带货币符号和格式的金额
* [`<DateTime>`](/docs/react-native/api/components/datetime): 遵循区域设置惯例的日期和时间

## 快速入门

变量组件可在 [`<T>`](/docs/react-native/api/components/t) 组件内使用，以处理动态内容：

```jsx
import { T, Var, Num, Currency, DateTime } from 'gt-react-native';

function UserProfile({ user }) {
  return (
    <T>
      <p>Welcome back, <Var>{user.name}</Var>!</p>
      <p>You have <Num>{user.itemCount}</Num> items.</p>
      <p>Balance: <Currency currency="USD">{user.balance}</Currency></p>
      <p>Last login: <DateTime>{user.lastLogin}</DateTime></p>
    </T>
  );
}
```


## 变量组件的工作原理

变量组件通过以下方式解决动态内容问题：

1. **包装动态值**，便于在 [`<T>`](/docs/react-native/api/components/t) 中使用
2. **在本地完成格式化**，使用浏览器内置的 i18n API
3. **保护数据隐私**——内容绝不会发送到翻译 API
4. **根据用户当前的区域设置进行本地化**

```jsx
// ❌ 这样会报错 - <T> 中包含动态内容
<T><p>Hello {username}</p></T>

// ✅ 这样可以正常工作 - 动态内容已被包裹
<T><p>Hello <Var>{username}</Var></p></T>
```


## 组件指南

### Var - 原始动态内容

对于任何无需特殊格式处理的动态内容，请使用 [`<Var>`](/docs/react-native/api/components/var)：

```jsx
// 用户信息
<T>
  <p>Hello, <Var>{user.name}</Var>!</p>
  <p>Your account ID is <Var>{user.accountId}</Var></p>
</T>

// 条件渲染
<T>
  Dashboard: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T>
```


### Num - 格式化数字

对于需要遵循区域设置格式规则的数字，请使用 [`<Num>`](/docs/react-native/api/components/num)：

```jsx
// 基本数字格式化
<T>
  You have <Num>{itemCount}</Num> items in your cart.
</T>

// 独立用法（等同于 number.toLocaleString()）
<Badge><Num>{totalItems}</Num></Badge>

// 自定义格式化选项
<T>
  Distance: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T>
```


### Currency - 货币金额

货币金额请使用 [`<Currency>`](/docs/react-native/api/components/currency)：

```jsx
// 基本货币格式化（默认为"USD"）
<T>
  Your total is <Currency>{total}</Currency>.
</T>

// 不同货币
<T>
  Price: <Currency currency="EUR">{price}</Currency>
</T>

// 自定义格式化
<Currency 
  currency="USD" 
  options={{ minimumFractionDigits: 0 }}
>
  {roundedAmount}
</Currency>
```


### DateTime - 日期和时间

可使用 [`<DateTime>`](/docs/react-native/api/components/datetime) 处理日期和时间：

```jsx
// 基本日期格式化
<T>
  Order placed on <DateTime>{orderDate}</DateTime>
</T>

// 时间格式化
<T>
  Last updated: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>

// 自定义日期格式
<DateTime options={{ 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
}}>
  {eventDate}
</DateTime>
```


## 隐私与安全

### 数据保留在本地

变量组件使用浏览器的 [Intl APIs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) 在本地完成所有格式化。**不会将任何动态内容发送到翻译 API**，因此非常适合用于：

* 用户名和个人信息
* 账号和 ID
* 财务数据和余额
* 私密的时间戳和日期

```jsx
// 安全 - 敏感数据保留在本地
<T>
  Account balance: <Currency currency="USD">{balance}</Currency>
  Last login: <DateTime>{lastLoginTime}</DateTime>
</T>
```


### 重要的例外情况

请注意在变量组件内部嵌套的 [`<T>`](/docs/react-native/api/components/t) 组件：

```jsx
// ⚠️ 内部的 <T> 内容将会被发送以进行翻译
<T>
  <Var>
    <T>Hello, world!</T>  {/* 此内容会被翻译 */}
    {privateData}         {/* 此内容保留在本地 */}
  </Var>
</T>
```


## 独立用法

变量组件也可以在 [`<T>`](/docs/react-native/api/components/t) 外单独用于纯格式化：

```jsx
// 这些组件与各自对应的 .toLocale*() 方法功能相同
<span><Num>{count}</Num></span>                    // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span>  // 价格格式化
<span><DateTime>{date}</DateTime></span>           // date.toLocaleDateString()
```


## 常见问题

### 忽略本地化设置

对于 [`<Currency>`](/docs/react-native/api/components/currency)，请务必传入 `currency` 属性以指定货币类型。这样可以确保显示该值时使用正确的货币符号和格式：

```jsx
// ❌ 默认使用 USD - 可能不符合用户预期
<T>
  The item costs <Currency>{price}</Currency>
</T>

// ✅ 明确指定货币类型
<T>
  The item costs <Currency currency="EUR">{price}</Currency>
</T>
```

其他组件也有可选的 props，可用于自定义格式：

```jsx
// 基本格式化
<T>
  <Num>{count}</Num> 件商品有库存
</T>

// 自定义格式化
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> 完成率
</T>

// 日期格式化
<T>
  最后更新：<DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>
```


## 下一步

* [分支组件指南](/docs/react-native/guides/branches) - 为翻译添加条件逻辑
* [字符串翻译指南](/docs/react-native/guides/strings) - 无需 JSX 即可翻译纯文本
* API 参考文档：
  * [`<Var>` 组件](/docs/react-native/api/components/var)
  * [`<Num>` 组件](/docs/react-native/api/components/num)
  * [`<Currency>` 组件](/docs/react-native/api/components/currency)