# react-native: 字符串
URL: https://generaltranslation.com/zh/docs/react-native/guides/strings.mdx
---
title: 字符串
description: 如何使用 useGT 国际化纯文本字符串
---

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

字符串翻译让你无需使用 JSX 即可直接处理文本翻译，非常适合用于属性、对象属性和纯文本值。在 React Native 组件中，使用 [`useGT`](/docs/react-native/api/strings/use-gt) 进行字符串翻译。


## 快速开始

```jsx
import { useGT } from 'gt-react-native';

function MyComponent() {
  const gt = useGT();
  return (
    <input 
      placeholder={gt('Enter your email')}
      title={gt('Email address field')}
    />
  );
}
```


## 何时使用字符串翻译

当你需要纯文本而不是 JSX 时，字符串翻译更合适：

### HTML 属性

```jsx
const gt = useGT();

<input 
  placeholder={gt('Search products...')}
  aria-label={gt('Product search input')}
  title={gt('Type to search our catalog')}
/>
```


### 对象属性

```jsx
const gt = useGT();

const user = {
  name: 'John',
  role: 'admin',
  bio: gt('Experienced software developer with 5 years in React'),
  status: gt('Currently available for projects')
};
```


### 配置和常量

```jsx
const gt = useGT();

const navigationItems = [
  { label: gt('Home'), href: '/' },
  { label: gt('Products'), href: '/products' },
  { label: gt('Contact'), href: '/contact' }
];
```


### 何时改用 T

对于 JSX 内容，请使用 [`<T>` 组件](/docs/react-native/api/components/t)：

```jsx
// ✅ 对 JSX 内容使用 <T>
<T><p>Welcome to <strong>our store</strong>!</p></T>

// ✅ 对纯文本使用字符串翻译
<input placeholder={gt('Search products')} />
```


## 使用变量

### 基本变量

将占位符替换为动态值：

```jsx
const gt = useGT();
const itemCount = 5;

// 带占位符的字符串
const message = gt('You have {count} items in your cart', { count: itemCount });
// 结果："You have 5 items in your cart"
```


### 多个变量

```jsx
const gt = useGT();
const order = { id: 'ORD-123', total: 99.99, date: '2024-01-15' };

const confirmation = gt(
  'Order {orderId} for ${total} was placed on {date}',
  { 
    orderId: order.id, 
    total: order.total, 
    date: order.date 
  }
);
```


### ICU 消息格式

如需进行高级格式化，请使用 ICU 语法：

```jsx
const gt = useGT();
translate('There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart', { count: 10 });
```

<Callout>
  在 [Unicode 文档](https://unicode-org.github.io/icu/userguide/format_parse/messages/)中详细了解 ICU Message Format。
</Callout>


## 示例

### 表单输入项

```jsx
import { useGT } from 'gt-react-native';

function ContactForm() {
  const gt = useGT();
  
  return (
    <form>
      <input 
        type="email"
        placeholder={gt('Enter your email address')}
        aria-label={gt('Email input field')}
      />
      <textarea 
        placeholder={gt('Tell us about your project...')}
        aria-label={gt('Project description')}
      />
      <button type="submit">
        {gt('Send Message')}
      </button>
    </form>
  );
}
```


### 导航菜单

```jsx
import { useGT } from 'gt-react-native';

function Navigation() {
  const gt = useGT();
  
  const menuItems = [
    { label: gt('Home'), href: '/', icon: 'home' },
    { label: gt('About Us'), href: '/about', icon: 'info' },
    { label: gt('Services'), href: '/services', icon: 'briefcase' },
    { label: gt('Contact'), href: '/contact', icon: 'mail' }
  ];

  return (
    <nav>
      {menuItems.map((item) => (
        <a key={item.href} href={item.href} title={item.label}>
          <Icon name={item.icon} />
          {item.label}
        </a>
      ))}
    </nav>
  );
}
```


### 动态内容生成器

```jsx
// utils/productData.js
export function getProductMessages(gt) {
  return {
    categories: [
      { id: 'electronics', name: gt('Electronics') },
      { id: 'clothing', name: gt('Clothing') },
      { id: 'books', name: gt('Books') }
    ],
    statusMessages: {
      available: gt('In stock and ready to ship'),
      backordered: gt('Currently backordered - ships in 2-3 weeks'),  
      discontinued: gt('This item has been discontinued')
    },
    errors: {
      notFound: gt('Product not found'),
      outOfStock: gt('Sorry, this item is currently out of stock')
    }
  };
}

// components/ProductCard.jsx
import { useGT } from 'gt-react-native';
import { getProductMessages } from '../utils/productData';

function ProductCard({ product }) {
  const gt = useGT();
  const messages = getProductMessages(gt);
  
  return (
    <div>
      <h3>{product.name}</h3>
      <p>{messages.statusMessages[product.status]}</p>
      <span>{messages.categories.find(c => c.id === product.categoryId)?.name}</span>
    </div>
  );
}
```


### 带文档标题的组件

```jsx
import { useGT } from 'gt-react-native';
import { useEffect } from 'react';

function ProductPage() {
  const gt = useGT();
  
  useEffect(() => {
    document.title = gt('Product Catalog - Find What You Need');
    
    // 更新 meta 描述
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', gt('Browse our extensive collection of high-quality products'));
    }
  }, [gt]);
  
  return (
    <div>
      <h1>{gt('Featured Products')}</h1>
      <p>{gt('Check out our latest and most popular items')}</p>
    </div>
  );
}
```


## 常见问题

### 运行时 的动态内容

字符串必须在构建时就已知——你无法翻译动态内容：

```jsx
// ❌ 动态内容无法正常工作
function MyComponent() {
  const [userMessage, setUserMessage] = useState('');
  const gt = useGT();
  
  return <p>{gt(userMessage)}</p>; // 这将导致错误
}

// ✅ 使用预定义字符串
function MyComponent() {
  const [messageType, setMessageType] = useState('welcome');
  const gt = useGT();
  
  const messages = {
    welcome: gt('Welcome to our app!'),
    goodbye: gt('Thanks for visiting!')
  };
  
  return <p>{messages[messageType]}</p>;
}
```

### 违反 Hook 规则

使用 [`useGT`](/docs/react-native/api/strings/use-gt) 时，请遵循 React 的 Hook 规则：

```jsx
// ❌ 不要在条件语句中调用 Hook
function MyComponent({ showMessage }) {
  if (showMessage) {
    const gt = useGT(); // 违反 Hook 规则
    return <p>{gt('Hello!')}</p>;
  }
  return null;
}

// ✅ 始终在顶层调用 Hook
function MyComponent({ showMessage }) {
  const gt = useGT();
  
  if (showMessage) {
    return <p>{gt('Hello!')}</p>;
  }
  return null;
}
```

<Callout>
  对于真正需要在 运行时 时进行翻译的动态内容，请参阅[动态内容指南](/docs/key-concepts/dynamic-content)。
</Callout>

## 后续步骤

* [动态内容指南](/docs/key-concepts/dynamic-content) - 处理 运行时 翻译
* [共享字符串指南](/docs/react-native/guides/shared-strings) - 整理可复用的翻译
* API 参考：