使用 React Native 创建多语言应用程序
语言一直是任何企业不可或缺的一部分。随着业务的增长，拓展到不同国家和地区变得至关重要。为了在这些地区取得成功，提供本地化服务至关重要。
对于移动应用而言，情况也并无二致。随着应用用户遍布世界各地，为用户提供使用其母语的功能就显得尤为重要。
在本文中，我们将使用react-native-localize包构建一个支持多语言的 React Native 应用程序。
先决条件
本教程需要您具备 React Native 的基础知识。要配置您的开发环境，请按照此处的官方指南进行操作。
为了确保我们理解一致，以下是本教程中使用的版本 -
- Node v10.15.0
- npm 6.4.1
- 纱线 1.16.0
- react-native 0.59.9
- react-native-localize 1.1.3
- i18n-js 3.3.0
入门
我们将构建一个 React Native 应用，该应用将支持英语、法语和阿拉伯语。
如果您想立即查看源代码，这是 Github链接。
要使用 创建新项目react-native-cli，请在终端中输入以下命令：
$ react-native init multiLanguage
$ cd multiLanguage
添加所需库
react-native-localize输入以下命令进行安装：
$ yarn add react-native-localize
然后使用以下方式链接：
$ react-native link react-native-localize
如果在安装过程中遇到任何错误，请查看此处的安装说明。
该react-native-localize库提供了许多与本地化相关的设备常量，但没有提供 i18n 库。
我们将使用I18n.jsJavaScript 提供 I18n 翻译。
$ yarn add i18n-js
由于i18n-js似乎没有提供任何缓存/记忆化功能，我们将使用lodash.memoize相同的方法。
$ yarn add lodash.memoize
添加翻译
在目录内创建一个translations目录src，然后在目录下为每种语言创建三个 JSON 文件，如下所示。
en.json英语fr.json法语ar.json阿拉伯语
这些文件内部将包含一个带有键和值的 JSON 对象。
每种语言的键都相同，将在应用程序中用于显示文本。
该值将是我们希望向用户显示的实际翻译，并且每种语言的值都会不同。
英文版：
{
"hello": "Hello World!"
}
法语版：
{
"hello": "Salut le Monde!"
}
阿拉伯语版：
{
"hello": "أهلاً بالعالم"
}
同样地，您可以为应用程序中将要使用的每个文本添加更多键值对。
添加主代码
打开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()，这对于安卓设备来说是必要的，因为组件需要重新渲染才能使更改可见。
我们将移除生命周期方法中的监听器componentWillUnmount()。
最后，我们将使用render()`printf` 函数并将我们的值作为参数传递给它。它会自动确定语言以及需要显示的文本。hellotranslate()key
运行应用程序
现在是时候看看翻译是否有效了。
输入以下命令，即可在模拟器或仿真器中运行您的应用：
$ react-native run-ios
$ react-native run-android
应该是这样的：
现在，请将设备语言设置更改为法语，然后重新打开应用。
同样，您可以将语言设置更改为阿拉伯语，然后看到阿拉伯语的“你好”。
目前为止一切顺利。
但如果我选择了一种应用程序中没有收录翻译的随机语言，会发生什么情况？它会回退到哪种语言？
事实证明，它的目标findBestAvailableLanguage是返回最佳可用翻译。因此，它会查看您的语言偏好设置来确定备用语言。
在 iOS 模拟器中，您可以进入“语言与地区”设置，查看语言的偏好顺序。
如果所选语言不是首选语言，findBestAvailableLanguage则会返回undefined（因此保留的值将是您的备用值），因为您的翻译中没有任何用户首选语言可用。
奖金
该react-native-localizeAPI 可提供对批次定位相关设备常量的访问。请务必查看文档中提供的完整 API 说明。
结论
添加多语言支持就是这么简单。现在您可以使用 react-native-localize 轻松地为您的应用提供多语言支持，这有助于提高用户应用的使用率。
您可以在这里找到GitHub仓库中的源代码。
本文最初发表于Medium。
如果你喜欢这篇文章，请点赞并分享。
文章来源：https://dev.to/vikrantnegi/creating-a-multi-language-app-in-react-native-1joj