React Native中的国际化和本地化国际化，或称i18n，是指建立能够适应不同文化、地区和语言的应用程序的过程。

国际化，或称i18n，是指建立能够适应不同文化、地区和语言的应用程序的过程。

然而，本地化，或称l10n，涉及到翻译到用户指定的地区或语言，并通过国际化来实现。

本地化一个应用程序意味着建立它以支持多种语言和地区，使应用程序能够被更多的用户访问和使用。

在移动应用开发中，本地化从用户的设备中获取语言和地域--这与用户的地理位置不同--并编写软件以进行相应调整。

一般来说，本地化一个应用程序是具有挑战性的，但在expo-localization 和i18n-js 的帮助下，我们将学习如何在一个世博会和裸露的React Native应用程序中实现本地化。

要求

在开始本教程之前，请确保你具备以下条件。

在你的电脑上安装了Node.js
如果你使用的是macOS，请安装Watchman
设置了React Native

此外，除了 [expo-localization](https://docs.expo.io/versions/v41.0.0/sdk/localization/)SDK，我们也可以使用react-native-localize这样的库。但是，这个工具箱只支持React Native，不支持Expo的应用程序，因为它是一个本地模块，不需要弹出Expo。

使用`expo-localization`

expo-localization SDK让我们可以访问用户的本地设备的定位数据，包括 [isoCurrencyCodes](https://docs.expo.io/versions/v41.0.0/sdk/localization/#localizationisocurrencycodes/)常数，它返回用户设备中所有支持的货币代码的数组，以及 [timezone]("https://docs.expo.io/versions/v41.0.0/sdk/localization/#localizationtimezone)常数，它返回设备的时区。

现在，让我们开始用expo-localization 和i18n-js 对Expo应用进行本地化。

创建一个Expo应用

为了开始，让我们使用Expo CLI生成一个Expo应用。打开一个新的终端，运行以下命令来生成一个Expo应用。

expo init name-of-your-app

选择一个空白模板。这为我们提供了开始工作所需的最低依赖性。

Select A Blank Template To Get The Minimum Dependencies

要打开这个应用程序，导航到我们新创建的应用程序的根目录，并相应地运行以下命令。

# For iOS
yarn ios
# or
npm run ios

# For Android
yarn android
# or
yarn android

该命令输出以下画面。

Open The App Main Screen

安装依赖项

现在我们已经生成了一个Expo应用，我们可以在导航到应用目录后安装expo-localization 和i18n-js 作为依赖。

运行以下任一命令来安装这两个包。

yarn add expo-localization i18n-js
#or
npm i expo-localization i18n-js

提取和集中应用程序的文本

本地化我们的应用程序的一个重要步骤是提取和集中用户将与之互动的文本到一个单独的文件。这使我们能够根据用户的设备所在地，有条件地将文本呈现给用户。

首先，在i18n/supportedLanguages.js 中创建一个文件；这就是我们要放置所有用户互动的非代码文本的地方。

在本教程中，我们的应用程序将支持三种语言。英语、中文和西班牙语。通过添加以下几行代码，我们创建了一个键值对的JavaScript对象。每种语言都有相同的键，但其值是不同的。

const en = {
  welcome: 'Internationalization and Localization in React Native',
  signoutBtn: 'Sign out',
  signOutAlertTitle: 'Cancel',
  signOutAlertMess: 'Are you sure you want to sign out?',
  confirm: 'Okay',
  resetBtn: 'Reset password',
};
const zh = {
  welcome: 'React Native 中的国际化和本地化',
  signoutBtn: '登出',
  signOutAlertTitle: '取消',
  signOutAlertMess: '您确定要退出吗？',
  confirm: '好的',
  resetBtn: '重设密码',
};
const es = {
  welcome: 'Internacionalización y localización en React Native',
  signoutBtn: 'desconectar',
  signOutAlertTitle: 'Cancelar',
  signOutAlertMess: '¿Estás segura de que quieres cerrar sesión?',
  confirm: 'Okey',
  resetBtn: 'Restablecer la contraseña',
};
export { zh, en, es };

稍后，我们将导入这些不同的语言，用键的值来替换当前的字符串，该值代表了用户的locale的文本。

获取用户的设备定位

expo-localization SDK通过调用locale 常量，访问设备的语言代码，给我们提供用户的设备定位。

添加国际化功能

让我们导入我们最近安装的两个包和我们的语言配置文件来添加国际化功能。

import * as Localization from 'expo-localization';
import i18n from 'i18n-js';
import { zh, en, es } from './i18n/supportedLanguages';

在import 语句之后，添加以下一行代码。

i18n.fallbacks = true;
i18n.translations = { en, zh, es };
i18n.locale = Localization.locale;

通过指定i18n.fallbacks = true ，我们就启用了locale fallback功能。这意味着，例如，如果我们不指定 "重置密码 "的西班牙语文本，该文本将退回到默认语言。

设置i18n.translations = { en, zh, es } ，指定我们想在应用中支持的语言的键值对。

而且，通过i18n.locale = Localization.locale ，我们是根据用户的设备设置来设置我们的应用程序的地域。

将应用程序文本本地化`i18n-js`

为了在应用程序上获得本地化的文本，我们需要调用i18n.t() 函数，并将我们想要翻译的键作为一个字符串传入。

比方说，我们想对我们的应用程序的welcome 文本进行本地化。我们可以添加以下内容。

>// jsx
<Text>{i18n.t('welcome')}</Text>

这就给了我们配置对象中的welcome 键的值，我们根据用户设备的定位导入了这个键。

The Welcome Key Renders In English

Welcome 设备的键设置为英语。

The Welcome Key Renders In Chinese

Welcome 设备的键设置为中文。

要在iOS模拟器上演示设备的本地化，打开设备设置，并导航到通用>语言和区域>iPhone语言。选择中文或西班牙语，看看文本如何根据所选语言有条件地呈现。

在安卓iOS模拟器上，打开菜单>设置>语言和键盘>选择地区。

在选择了地区语言后，iOS模拟器上最终本地化的Expo应用看起来如下。

The Final Expo App

如果我们想在不进入设备设置的情况下改变设备的地域性，我们可以将i18n.locale = Localization.locale ，改为i18n.locale =``'es' ，以获得西班牙语或该应用支持的任何语言代码的本地化版本的应用。

注意，这只是为了测试目的。

裸露的React Native应用程序

生成一个新的React Native项目

为了开始使用我们的裸React Native应用，让我们使用以下命令生成一个React Native项目。

npx react-native init ReactNativeLocalize

这将生成一个空的React Native项目并安装所有必要的依赖项。

要打开这个应用程序，导航到我们新创建的应用程序的根目录，并相应地运行以下命令。

# To start Metro
npx react-native start

#open a new terminal and run:
npx react-native run-android
# or
react-native run-ios

让我们看看我们如何在一个裸露的React Native应用中使用expo-localization SDK和18n-js 。首先，安装并配置 [react-native-unimodules](https://docs.expo.io/bare/installing-unimodules/)包，并在我们的裸React Native项目中配置以下依赖项。

yarn add react-native-unimodules
yarn add pod-install

#or

npm install react-native-unimodules
npx pod-install

接下来，按照这些额外的配置对iOS和Android的应用程序进行配置。

现在，我们可以安装所需的依赖项。运行以下任一命令来安装这两个软件包。

yarn add expo-localization i18n-js
#or
npm i expo-localization i18n-js

安装完成后，按照我们在Expo应用中使用的相同步骤，对裸露的React Native应用进行本地化。

下面是一个使用expo-localization SDK和18n-js 的本地化裸React Native应用的工作演示。

Final Bare React Native App

总结

通过国际化，我们很容易就实现了Expo和裸React Native应用的本地化。通过使用expo-localization 和i18n-js 国际化库，我们使用i18n.t() 函数渲染了两个应用程序的本地化文本。

本教程中使用的Expo和裸React Native项目的完整代码可以在GitHub上找到。欢迎发表评论，让我知道你对这篇文章的看法。你也可以在Twitter和GitHub上找到我。谢谢您的阅读!

The postInternationalization and localization in React Nativeappeared first onLogRocket Blog.

React Native中的国际化和本地化

要求

使用expo-localization