# General Translation React SDKs (gt-react, gt-next, gt-react-native): React Native のトラブルシューティング
URL: https://generaltranslation.com/ja/docs/react/react-native/troubleshooting.mdx
---

title: React Native のトラブルシューティング
description: React Native アプリで発生するネイティブモジュール、ポリフィル、ロケール、翻訳ファイル、開発に関する問題を診断する方法。
related:
  links:
    - /docs/react/guides/configuring
    - /docs/react/guides/storing-translations
    - /docs/react/guides/managing-locales
    - /docs/react/guides/translating-jsx

---

まず Metro またはデバイスに表示されるエラーを確認し、該当するセットアップ層 (ネイティブリンク、Babel ポリフィル、ロケール設定、生成された翻訳ファイル) を確認してください。

## ネイティブモジュールを修正する [#native-module]

`GtReactNative` が見つからないというエラーは、ネイティブモジュールがインストールされているアプリのバイナリに含まれていないことを示しています。

### Expo

Expo Go ではカスタムネイティブモジュールを読み込めません。development build を作成して実行してください。

```bash
npx expo run:ios
# または
npx expo run:android
```

`gt-react-native` を追加またはアップグレードした後は、開発クライアントを再ビルドしてください。Metro を再起動するだけでは、既存のバイナリに含まれるネイティブモジュールは更新されません。

### React Native CLI

パッケージを追加した後、iOS の pods をインストールし、アプリを再ビルドします。

```bash
cd ios
pod install
cd ..
```

モジュールが引き続き見つからない場合は、シミュレーターまたはデバイスから以前のアプリを削除し、クリーンなネイティブビルドを実行してください。

*注: React Native Web ではネイティブモジュールは必要ありません。代わりに、ブラウザのロケール検出とストレージを使用します。*

## ポリフィル のセットアップを修正する [#polyfills]

アプリで無効なロケールコードや `Intl` API の不足が報告される場合は、[Babel プラグイン](/docs/react/react-native/plugin) がアプリの実際のエントリファイルに対して実行されていることを確認してください。

* Expo Router では通常、`require.resolve('expo-router/entry')` を使用します。
* bare React Native アプリ では通常、`index.js` への絶対パスを使用します。
* カスタムエントリファイルは、`entryPointFilePath` で指定する必要があります。

プラグインには、デフォルトロケールとすべての対象ロケールが必要です。`locales` を直接渡すか、`config` を渡すか、`configFilePath` に読み取り可能な `gt.config.json` を設定してください。プラグインは、サポートされている正規ロケールコードの FormatJS ロケールデータのみを読み込みます。アプリがカスタムエイリアスでルーティングしている場合は、その正規コードをプラグインに渡してください。

Babel の設定を変更した後は、Metro の変換キャッシュをクリアしてください。

```bash
npx expo start --clear
```

bare React Native アプリでは、キャッシュをリセットして Metro を再起動します。

```bash
npx react-native start --reset-cache
```

セットアップで Babel を実行できない場合は、[プラグインリファレンス](/docs/react/react-native/plugin#how-it-works)の手動インポートの例に従ってください。

## 不足しているファイルを生成する [#missing-files]

Metro は、アプリの起動前に静的な `require()` 呼び出しを解決します。[`loadTranslations`](/docs/react/reference/functions/load-translations) マップで指定するすべての翻訳ファイルは、あらかじめ存在している必要があります。

API Key を使用せずに、ソースの内容を含むプレースホルダーファイルを生成します。

```bash
npx gt generate
```

または、プロジェクトの認証情報を使用して翻訳済みファイルを生成します。

```bash
npx gt translate
```

`gt.config.json` の CLI `output` パスを `loadTranslations.ts` 内のパスと一致させてください。これまで存在しなかったファイルを追加した後は、Metro を再起動してください。

## 開発時の動作を理解する [#development]

開発時のランタイム翻訳では、アプリがキャッシュされていない翻訳をリクエストするため、ロケールを初めて開く際に時間がかかる場合があります。本番ビルドでは、事前に[`npx gt translate`](/docs/cli/reference/commands/translate)を実行し、生成されたファイルをローカルで読み込む必要があります。

翻訳が不正確な場合は、曖昧なコンテンツにコンテキストを追加してください。

```tsx
<T $context="the technology company">Apple</T>
```

[`useGT`](/docs/react/reference/hooks/use-gt) 翻訳関数も、同じ `$context` オプションを受け取ります。

サーバー側での React Native 環境は明示的にはサポートされていません。Expo Web または React Native Web のビルドをサーバーでレンダリングする場合は、デプロイ前にそのランタイムでロケール検出とストレージの動作をテストしてください。
## Next steps

- /docs/react/guides/configuring
- /docs/react/guides/storing-translations
- /docs/react/guides/managing-locales
- /docs/react/guides/translating-jsx