# react-native: DictionaryTranslationOptions
URL: https://generaltranslation.com/ja/docs/react-native/api/types/dictionary-translation-options.mdx
---
title: DictionaryTranslationOptions
description: DictionaryTranslationOptions 型の API リファレンス
---

{/* 自動生成: 直接編集せず、代わりに content/docs-templates/ のテンプレートを編集してください。 */}


## 概要

`DictionaryTranslationOptions` 型は、辞書エントリに変数を渡し、そのレンダリング方法を指定するために使用します。
これは、[`useTranslations`](/docs/react-native/api/dictionary/use-translations) と組み合わせて、辞書エントリに変数を渡す際に使用されます。

<Callout>
  **ビルド時翻訳:**
  `useTranslations` による翻訳はビルド時に行われますが、変数自体は翻訳されません。
  代わりに、書式設定されたうえで翻訳文に挿入されます。
  必ず[こちらのデプロイガイド](/docs/react-native/tutorials/quickdeploy)に従ってください。
</Callout>

## リファレンス

### パラメータ

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

### 説明

| Prop        | 説明                            |
| ----------- | ----------------------------- |
| `variables` | 各キーが、辞書エントリ内で各値の対応先を示すオブジェクト。 |

***

## 例

### 変数を渡す

辞書エントリに変数を渡すには、次の 2 つが必要です。(1) エントリに変数を追加すること、(2) [`d`](/docs/react-native/api/dictionary/use-translations) の呼び出しでその変数を参照することです。

まず、次の構文で辞書エントリに変数を追加します: `{username}`。
`username` は変数名です。

```jsx title="dictionary.ts"
// [!code word:username]
const dictionary = {
  greeting: {
    hello: 'Hello, {username}!',
  },
};

export default dictionary;
```

次に、変数を参照します：

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

const Component = () => {
  const t = useTranslations();
  return <div>{t('greeting.hello', { username : 'Brian123' })}</div>;
};
```


### ICUメッセージ形式を使う

`gt-react-native` は ICUメッセージ形式に対応しており、変数の書式設定も行えます。

```jsx title="dictionary.ts"
// [!code word:account-balance]
const dictionary = {
  account: {
    balance: 'Your account balance: {dollars, number, ::currency/USD}!',
  },
};

export default dictionary;
```

次に、変数を参照します。

```jsx title="Component.tsx"
// [!code word:account-balance]
import { useTranslations } from 'gt-react-native';

const Component = () => {
  const t = useTranslations();
  return <div>
    { t(
      'account.balance',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};
```

***


## 注記

* `variables` オブジェクトは、辞書エントリに値を渡します。
* `variablesOptions` オブジェクトは、変数の挙動を定義します。

## 次のステップ

* 辞書と一般的な使い方について詳しくは、[dictionaries](/docs/react-native/guides/dictionaries)を参照してください。
* 辞書のインターフェースについて詳しくは、[`useTranslations`](/docs/react-native/api/dictionary/use-translations)を参照してください。
* 書式指定オプションについて詳しくは、[`ICUメッセージ形式`](https://unicode-org.github.io/icu/userguide/format_parse/messages/)を参照してください。