# General Translation React SDKs (gt-react, gt-next, gt-react-native): 设置 React Native
URL: https://generaltranslation.com/zh/docs/react/react-native/setup.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 在 React Native 应用中初始化 General Translation，添加 provider，并加载翻译，适用于 Expo 和原生 React Native CLI。

`gt-react-native` 需要在应用的入口文件中完成设置：先在模块级别调用一次 [`initializeGT`](/docs/react/reference/config#initialize)，再用 [`<GTProvider>`](/docs/react/reference/components/gt-provider) 包裹应用。与 Web 端的包不同，provider 会自行加载翻译，因此你无需向它传入 `translations` prop，而且默认会从设备解析 `locale`。

本页介绍 React Native 设置中与平台相关的部分。若要查看包含安装和 CLI 在内的完整分步流程，请参阅 [React Native Quickstart](/docs/react/react-native-quickstart)。关于此设置所依赖的 polyfill plugin，请参阅 [Plugin](/docs/react/react-native/plugin)。

<Callout type="warn">
  **警告：** `gt-react-native` 包含原生模块，因此不支持 Expo Go——请运行开发构建 (`npx expo run:ios` / `run:android`)。如果你使用的是原生 React Native CLI，安装后请运行 `cd ios && pod install`。
</Callout>

## 初始化 General Translation [#initialize]

在应用开始渲染前，请在入口文件的模块级别调用一次 [`initializeGT`](/docs/react/reference/config#initialize)。展开你的 `gt.config.json`，并传入 [`loadTranslations`](/docs/react/reference/functions/load-translations) 函数。添加 `projectId` 和 `devApiKey`，即可在开发期间启用按需翻译。

```tsx
import { initializeGT } from 'gt-react-native';
import gtConfig from './gt.config.json';
import { loadTranslations } from './loadTranslations';

// 在模块级别初始化一次
initializeGT({
  ...gtConfig,
  loadTranslations,
  projectId: process.env.EXPO_PUBLIC_GT_PROJECT_ID,
  devApiKey: process.env.EXPO_PUBLIC_GT_DEV_API_KEY,
});
```

[`initializeGT`](/docs/react/reference/config#initialize) 接受与其他框架相同的 `locale` 和 delivery 选项——请参阅[配置参考](/docs/react/reference/config#initialization)。`gt.config.json` 不会自动读取，因此请导入它，并在调用时将其展开。

*注意：在 Expo 中，公共环境变量必须使用 `EXPO_PUBLIC_` 前缀。绝不要在你的应用包中暴露生产环境 API Key。*

## 添加 provider [#provider]

使用 [`<GTProvider>`](/docs/react/reference/components/gt-provider) 包裹你的应用。在 React Native 中，该 provider 会在内部加载当前活动区域设置的翻译并管理区域设置状态，因此不需要 `translations` prop，且默认会从设备解析 `locale` (你仍然可以传入可选的 `locale` 覆盖值——见下文) 。翻译加载期间，它会渲染加载中的后备内容；你可以传入 `fallback` prop 进行自定义。

```tsx title="App.tsx"
import { GTProvider } from 'gt-react-native';
import Home from './src/Home';

export default function App() {
  return (
    <GTProvider>
      <Home />
    </GTProvider>
  );
}
```

该 provider 还接受可选的 `locale`、`region` 和 `enableI18n` 属性，用于覆盖它默认会从设备中解析出的值。

## 加载翻译 [#load-translations]

Metro (即 React Native 的 bundler) 不支持动态导入，因此请使用静态 `require` 调用，将每个区域设置映射到对应的翻译文件。运行 [`npx gt translate`](/docs/cli/reference/commands/translate) 时，CLI 会生成这些文件。

```ts title="loadTranslations.ts"
const translations: Record<string, unknown> = {
  es: require('./src/_gt/es.json'),
  fr: require('./src/_gt/fr.json'),
  ja: require('./src/_gt/ja.json'),
};

export function loadTranslations(locale: string) {
  return translations[locale] ?? {};
}
```

## 入口文件 [#entry-points]

应在何处调用 [`initializeGT`](/docs/react/reference/config#initialize)，取决于你的项目类型。

<Tabs items={['Expo', 'React Native CLI']}>
  <Tab value="Expo">
    在根布局的模块级别进行初始化，然后渲染 provider。

    ```tsx title="app/_layout.tsx"
    import { Slot } from 'expo-router';
    import { GTProvider, initializeGT } from 'gt-react-native';
    import gtConfig from '../gt.config.json';
    import { loadTranslations } from '../loadTranslations';

    initializeGT({
      ...gtConfig,
      loadTranslations,
      projectId: process.env.EXPO_PUBLIC_GT_PROJECT_ID,
      devApiKey: process.env.EXPO_PUBLIC_GT_DEV_API_KEY,
    });

    export default function RootLayout() {
      return (
        <GTProvider>
          <Slot />
        </GTProvider>
      );
    }
    ```
  </Tab>

  <Tab value="React Native CLI">
    在 `index.js` 中初始化，需在应用注册前完成，并在 `App.tsx` 中添加 provider。

    ```js title="index.js"
    import { AppRegistry } from 'react-native';
    import { initializeGT } from 'gt-react-native';
    import App from './App';
    import { name as appName } from './app.json';
    import gtConfig from './gt.config.json';
    import { loadTranslations } from './loadTranslations';

    initializeGT({ ...gtConfig, loadTranslations });

    AppRegistry.registerComponent(appName, () => App);
    ```

    ```tsx title="App.tsx"
    import { GTProvider } from 'gt-react-native';
    import Home from './src/Home';

    export default function App() {
      return (
        <GTProvider>
          <Home />
        </GTProvider>
      );
    }
    ```
  </Tab>
</Tabs>

这两种入口文件也都需要在 `babel.config.js` 中配置 [polyfill plugin](/docs/react/react-native/plugin)，否则 `gt-react-native` 所依赖的 `Intl` API 将不可用。

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.