前言
在随着应用越来越复杂的今天，多数应用需要支持国际化（i18n）来适配多种语言文化。为了方便开发人员进行国际化处理，我们现在介绍 npm 包 tam-i18n 的使用方法。
tam-i18n 是一个支持 React 和 React Native 的国际化工具包，提供了 i18n 数据管理以及翻译等功能。下面将详细介绍如何使用它来实现国际化应用。
安装
首先，需要使用 npm 安装 tam-i18n：
npm install tam-i18n --save
初始化
在应用程序中，需要初始化一个 i18n 实例，并配置读取本地 JSON 文件的路径。在 React Native 应用中，需要指定获取当前设备的语言环境，如下所示：
import I18n from 'tam-i18n';
import DeviceInfo from 'react-native-device-info';
const lng = DeviceInfo.getDeviceLocale();
I18n.init({ lng, fallbackLng: 'en-US', lngFilesPath: './resources/locales/{{lng}}.json' });如果使用 React 程序，只需要读取 navigator 上的语言环境就够了，如下所示：
import I18n from 'tam-i18n';
const lng = navigator.language;
I18n.init({ lng, fallbackLng: 'zh-CN', lngFilesPath: '/locales/{{lng}}.json' });需要注意的是，fallbackLng 表示默认语言，如果当前不存在该语言的语言包或者出现了访问错误，将会使用 fallbackLng 的语言包代替。
另外，i18n 实例可以在全局使用，也可以在本地范围内使用。例如：
-- -------------------- ---- ------- ------ ---- ---- ----------- -- -- ---- ------- ----- ---- - ----------------------- ------------------ -- -------- ---- -- ----- --------- - ----------------------- ----- --------- - ---------------------------- -----------------------
语言包配置
tam-i18n 读取的语言包必须是规定的 JSON 文件格式，包括通过 key-value 形式存储的键值对。键为翻译名称，值为翻译的文本。语言包中可以使用值插值，例如如下的 "{{name}}" 将会在运行时被 "developer" 替换。
{
"app": {
"greeting": "Hello, {{name}}!",
"description": "This is a {{app}}."
}
}在放置在本地的语言包文件公用的地方，例如在 "resources/locales" 目录下。文件名应该遵循 "languageCode-CountryCode.json" 的规则，如下所示：
resources ├── locales │ ├── en-US.json │ └── zh-CN.json
组件翻译
tam-i18n 支持 React 和 React Native 的翻译组件来渲染翻译的文本。以下是一个简单的例子：
import I18n from 'tam-i18n';
const App = () => (
<div>
<h1>{I18n.t('app.title')}</h1>
<p>{I18n.t('app.description', { app: 'React' })}</p>
</div>
);其中，翻译的文本可以使用 {{variableName}} 标记变量，该变量将在 I18n.t() 中使用。例如，"app.description" 的值 "This is a {{app}}." 中的 "{{app}}" 标记为变量，可以使用 "I18n.t('app.description', { app: 'React' })" 来替换 "{{app}}" 标记为模板变量中的值 "React"。tam-i18n 将会返回 "This is a React." 作为结果。
翻译组件支持和普通 HTML 标记的行为一样。例如，可以嵌套其他组件并且不会影响翻译的功能：
import I18n from 'tam-i18n';
const App = () => (
<div>
<h1>{I18n.t('app.title')}</h1>
<p>{I18n.t('app.description', { app: <strong>React</strong> })}</p>
</div>
);生命周期翻译
除了 React 和 React Native 的 UI 翻译组件之外，tam-i18n 还提供生命周期的翻译能力。通过在组件中调用 componentDidMount() 生命周期方法，在进行国际化处理时，可以根据需要执行翻译的文本。例如：
-- -------------------- ---- -------
------ ---- ---- -----------
----- --- ------- --------------- -
------------------- -
-------------- - --------------------
-
-------- -
------ -
-----
------------------------------
----------------------------- - ---- ---------------------- -------
------
--
-
-这将使页面的标题根据当前语言环境而自动更改。
结论
tam-i18n 是一个支持 React 和 React Native 应用程序的国际化工具，可以便于地进行 i18n 管理和翻译。通过上述几个步骤，我们可以轻松地实现一个国际化应用程序。
如果您需要更详细的说明，请查看 tam-i18n 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b381e8991b448e2fda