產品在地化對於開拓新國家和地區的國際企業來說非常重要。 同樣，行動應用程式也需要本地化。 如果開發人員開始國際擴張，為其他國家的使用者提供使用其母語介面的機會非常重要。 在本文中，我們將使用該套件創建一個 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 是一個很好的選擇，可以讓您擴展應用程式的使用者群。
專案原始碼 .
技能箱推薦：
- 兩年實踐課程 .
- 在線課程 .
- 實踐年課程 .
來源： www.habr.com