产品本地化对于开拓新国家和地区的国际企业来说非常重要。 同样，移动应用程序也需要本地化。 如果开发人员开始国际扩张，为其他国家/地区的用户提供使用其母语界面的机会非常重要。 在本文中，我们将使用该包创建一个 React Native 应用程序 .
技能箱推荐： 教育在线课程 .
我们提醒： 对于“Habr”的所有读者 - 使用“Habr”促销代码注册任何 Skillbox 课程可享受 10 卢布的折扣。
工具和技能
要理解本文，您需要使用 React Native 的基本技能。 要熟悉工作机器的设置，您可以 .
我们将需要这些版本的软件工具：
- 节点v10.15.0
- 6.4.1
- 纱1.16.0
- 反应本机 0.59.9
- 反应本机本地化 1.1.3
- i18n-js 3.3.0
入门
我们将创建一个支持英语、法语和阿拉伯语的应用程序。 首先我们使用react-native-cli创建一个新项目。 为此，您需要在终端中输入：
$ 反应本机初始化多语言
$ cd 多语言
添加必要的库
第一步是通过输入以下内容来安装react-native-localize：
$ 纱线添加反应本机本地化
如果安装过程中出现问题， .
React-native-localize 库使开发人员可以访问多语言功能。 但她还需要一个库 - i18n。
本文介绍了使用 为了提供 JavaScript 的翻译。
$ 纱线添加 i18n-js
好吧，由于 i18n-js 不提供缓存或记忆，我建议使用 lodash.memoize 来实现：
$ 纱线添加 lodash.memoize
处理翻译
为了使应用程序能够使用其他语言，您首先需要在 src 内创建一个翻译目录，然后为每种语言创建三个 JSON 文件。
1. en.json 为英文；
2. fr.json 法语；
3. 阿拉伯语的 ar.json。
这些文件包含带有键和值的 JSON 对象。 每种语言的密钥都是相同的。 应用程序使用它来显示文本信息。
值是需要向用户显示的文本。
英语：
{“你好”：“你好世界！”}
Французский
{“你好”：“向世界致敬！”}
Арабский
{“你好”：“你好”}
您可以用同样的方法添加其他语言。
主要代码
此时，您需要打开 App.js 文件并向其添加导入：
import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Use for caching/memoize for better performance
import {
I18nManager,
SafeAreaView,
ScrollView,
StyleSheet,
Text,
View
} from "react-native";之后，添加稍后有用的辅助函数和常量。
const translationGetters = {
// lazy requires (metro bundler does not support symlinks)
ar: () => require("./src/translations/ar.json"),
en: () => require("./src/translations/en.json"),
fr: () => require("./src/translations/fr.json")
};
const translate = memoize(
(key, config) => i18n.t(key, config),
(key, config) => (config ? key + JSON.stringify(config) : key)
);
const setI18nConfig = () => {
// fallback if no available language fits
const fallback = { languageTag: "en", isRTL: false };
const { languageTag, isRTL } =
RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
fallback;
// clear translation cache
translate.cache.clear();
// update layout direction
I18nManager.forceRTL(isRTL);
// set i18n-js config
i18n.translations = { [languageTag]: translationGetters[languageTag]() };
i18n.locale = languageTag;
};好吧，现在让我们创建一个 App 类的组件：
export default class App extends React.Component {
constructor(props) {
super(props);
setI18nConfig(); // set initial config
}
componentDidMount() {
RNLocalize.addEventListener("change", this.handleLocalizationChange);
}
componentWillUnmount() {
RNLocalize.removeEventListener("change", this.handleLocalizationChange);
}
handleLocalizationChange = () => {
setI18nConfig();
this.forceUpdate();
};
render() {
return (
<SafeAreaView style={styles.safeArea}>
<Text style={styles.value}>{translate("hello")}</Text>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
safeArea: {
backgroundColor: "white",
flex: 1,
alignItems: "center",
justifyContent: "center"
},
value: {
fontSize: 18
}
});第一个元素 setI18nConfig() 设置初始配置。
然后你需要向 componentDidMount() 添加一个事件监听器，该元素将监听更新并在更新发生时调用handleLocalizationChange()。
该handleLocalizationChange()方法激活setI18nConfig()和forceUpdate()。 这对于 Android 设备来说是必要的，因为必须渲染组件才能使更改明显。
然后您需要从 componentWillUnmount() 方法中删除监听。
最后，render()通过使用translate()并添加一个关键参数来返回hello。 完成这些步骤后，应用程序将能够“理解”需要什么语言并用它显示消息。
应用程序启动
现在是时候检查翻译的效果了。
首先，我们通过键入以下命令在模拟器或仿真器中启动应用程序
$ 反应本机运行 ios
$ 反应本机运行 Android
它看起来像这样：
现在您可以尝试通过启动应用程序将语言更改为法语。
我们对阿拉伯语做同样的事情，没有区别。
到目前为止，一切都很好。
但是，如果您选择一种随机语言，而应用程序中没有翻译，会发生什么情况？
事实证明，findBestLanguage 的任务是从所有可用翻译中提供最佳翻译。 结果，将显示默认语言。
我们正在谈论电话设置。 例如，在 iOS 模拟器中您可以看到语言的顺序。
如果所选语言不是首选语言，findBestAvailableLanguage 将返回 undefined，以便显示默认语言。
奖金
react-native-localize 有一个 API，可以提供对大量语言元素的访问。 在开始工作之前， .
发现
该应用程序可以毫无问题地使用多语言。 React-native-localize 是一个很好的选择，可以让您扩展应用程序的用户群。
项目源码 .
技能箱推荐：
- 两年实践课程 .
- 在线课程 .
- 实践年课程 .
来源： habr.com