ืคึผืจืึธืืืงื ืืึธืืงืึทืืึทืืืืฉืึทื ืืื ืืืืขืจ ืืืืืืืง ืคึฟืึทืจ ืืื ืืขืจื ืึทืฆืืึธื ืึทืืข ืงืึธืืคึผืึทื ืืขืก ืืืึธืก ืืืกืคืึธืจืฉื ื ืืึทืข ืืขื ืืขืจ ืืื ืืงืืืืช. ืกืืืืืึทืจืื, ืืึธืืงืึทืืึทืืืืฉืึทื ืืื ืืืจืฃ ืคึฟืึทืจ ืจืืจืขืืืืืง ืึทืคึผืืึทืงืืืฉืึทื ื. ืืืื ืึท ืืขืืืขืืึธืคึผืขืจ ืืืืื ืืื ืืขืจื ืึทืฆืืึธื ืึทืืขืจ ืืงืกืคึผืึทื ืฉืึทื, ืขืก ืืื ืืืืืืืง ืฆื ืืขืื ื ืืฆืขืจืก ืคืื ืื ืื ืืขืจ ืืึทื ื ืื ืืขืืขืื ืืืื ืฆื ืึทืจืืขืื ืืื ืื ืฆืืืื ื ืืื ืืืืขืจ ืืขืืืืจื ืฉืคึผืจืึทื. ืืื ืืขื ืึทืจืืืงื, ืืืจ ืืืขืื ืฉืึทืคึฟื ืึท React Native ืึทืคึผืืึทืงืืืฉืึทื ืืื ืืขื ืคึผืขืงื .
Skillbox ืจืขืงืึทืืขื ืื: ืืืืืื ืืงืจืืื ืึธื ืืืื ืงืืจืก .
ืืืจ ืืขืจืืึธื ืขื ืืืจ: ืคึฟืึทืจ ืึทืืข ืืืืขื ืขืจ ืคืื "ืืืจ" - ืึท ืึทืจืึธืคึผืจืขืืขื ืขื ืคืื 10 ืจืืื ืืืขื ืืืจ ืคืึทืจืฉืจืืึทืื ืืื ืงืืื ืกืงืืืืึธืงืก ืงืืจืก ื ืืฆื ืื ืคึผืขืจืืึธืืฉืึทื ืึทื ืงืึธื "ืืืจ".
ืืืฉืืจืื ืืื ืกืงืืื
ืฆื ืคึฟืึทืจืฉืืืื ืืขื ืึทืจืืืงื, ืืืจ ืืึทืจืคึฟื ืืงืขืจืืืง ืกืงืืื ืืื ืืจืืขืื ืืื React Native. ืฆื ืืืงืขื ืขื ืืื ืืื ืื ืกืขืืืื ืืก ืคืื ืื ืึทืจืืขื ืืึทืฉืื, ืืืจ ืงืขื ืขื .
ืืืจ ืืืขืื ืืึทืจืคึฟื ืื ืืืขืจืกืืขืก ืคืื ืืืืืืืืืจื ืืืฉืืจืื:
- ื ืึธืืข ืื10.15.0
- ื ืคึผื 6.4.1
- ืืึทืจื 1.16.0
- ืจืขืึทืืืจื-ืืขืืืืจื 0.59.9
- react-native-localize 1.1.3
- i18n-js 3.3.0
ืืขืืื ื ืกืืึทืจืืขื
ืืืจ ืืืขืื ืฉืึทืคึฟื ืึท ืึทืคึผืืึทืงืืืฉืึทื ืืืึธืก ืืืขื ืฉืืืฆื ืขื ืืืืฉ, ืคืจืื ืฆืืืืืฉ ืืื ืึทืจืึทืืืฉ. ืขืจืฉืืขืจ ืืืจ ืืึทืื ืึท ื ืืึทืข ืคึผืจืืืขืงื ื ืืฆื ืจืขืึทืงื-ืืขืืืืจื-ืงืื. ืฆื ืืึธื ืืึธืก, ืืืจ ืืึทืจืคึฟื ืฆื ืึทืจืืึทื ืืขื ืืืึธืงืืึทื:
$ ืจืขืึทืืืจื-ืืขืืืืจื ืื ืื ืืืืื ืฉืคึผืจืึทื
$ ืงืึธืืคึผืึทืงืืืืกืง MultiLanguage
ืึทืืื ื ืื ื ืืืืืง ืืืืืจืขืจืื
ืืขืจ ืขืจืฉืืขืจ ืฉืจืื ืืื ืฆื ืื ืกืืึทืืืจื ืจืขืึทืงื-ืืขืืืืจื-ืืึธืงืึทืืืืข ืืืจื ืืืืคึผืื ื ืื ืคืืืืขื ืืข:
$ ืืึทืจื ืืืืื ืจืขืึทืืืจื-ืืขืืืืจื-ืืึธืืงืึทืืืื
ืืืื ืคึผืจืึธืืืขืืก ืคืึทืื ืืขืฉืึทืก ืื ืื ืกืืึทืืืจืื ื ืคึผืจืึธืฆืขืก, .
ืื ืจืขืึทืงื-ืืขืืืืจื-ืืึธืงืึทืืืืข ืืืืืืึธืืขืง ืืื ืื ืืขืืืขืืึธืคึผืขืจ ืึทืงืกืขืก ืฆื ืืึทืืืืืืื ืืืืึทื ืคึฟืขืึดืงืืืื. ืืืขืจ ืื ืืืจืฃ ื ืื ืืฒื ืืืืืืืืขืง โ ื18ื.
ืืขืจ ืึทืจืืืงื ืืืฉืจืืืื ืื ื ืืฆื ืืื ืกืืจ ืฆื ืฆืืฉืืขืื ืืืืขืจืืขืฆืื ื ืืื ืืืฉืึทืืืึทืกืงืจืืคึผื.
$ ืืึทืจื ืืืืื i18n-js
ื ื, ืืื ื i18n-js ืืื ื ืืฉื ืฆืืฉืืขืื ืงืึทืืฉืื ื ืึธืืขืจ ืืขืืึธืืืึทืืืึธื, ืืื ืคึฟืึธืจืฉืืึธืื ื ืืฆื lodash.memoize ืคึฟืึทืจ ืืขื:
$ ืืึทืจื ืืืืื lodash.memoize
ืืจืืขืื ืืื ืืืืขืจืืขืฆืื ืืขื
ืึผืื ืื ืึทืคึผืืึทืงืืืฉืึทื ืืึธื ืงืขื ืขื ืึทืจืืขืื ืืื ืื ืืขืจืข ืฉืคึผืจืึทืื, ืืืจ ืืึทืจืคึฟื ืฆื ืฉืึทืคึฟื ืึท ืืืืขืจืืขืฆืื ื ืืืขืืืืืึทืืขืจ ืืื src, ืืขืจื ืึธื ืืจืื JSON ืืขืงืขืก ืคึฟืึทืจ ืืขืืขืจ ืฉืคึผืจืึทื.
1. en.json ืคึฟืึทืจ ืขื ืืืืฉ;
2. ืคืจ.ืืืฉืกืึธื ืคึฟืึทืจ ืคืจืื ืฆืืืืืฉ;
3. ar.json ืคึฟืึทืจ ืึทืจืึทืืืฉ.
ืื ืืขืงืขืก ืึทื ืืืึทืืื JSON ืึทืืืืฉืขืงืฅ ืืื ืฉืืืกืืขื ืืื ืืืึทืืืขืก. ืืขืจ ืฉืืืกื ืืืขื ืืืื ืื ืืขืืืข ืคึฟืึทืจ ืืขืืขืจ ืฉืคึผืจืึทื. ืขืก ืืื ืืขื ืืฆื ืืืจื ืื ืึทืคึผืืึทืงืืืฉืึทื ืฆื ืืืืึทืื ืืขืงืกื ืืื ืคึฟืึธืจืืึทืฆืืข.
ืืืขืจื ืืื ืืขืจ ืืขืงืกื ืืืึธืก ืืึทืจืฃ ืืืื ืืขืืืืื ืฆื ืืขืจ ืืึทื ืืฆืขืจ.
ืขื ืืืืฉ:
{"hello": "ืืขืื ืืืขืื!"}
ะคัะฐะฝััะทัะบะธะน
{"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;
};ื ื, ืืืฆื ืืึธืื ืืื ืื ืืึทืื ืึท ืงืึธืืคึผืึธื ืขื ื ืคืื ืื ืึทืคึผ ืงืืึทืก:
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 (), ืฉืืขืื ืื ืขืจืฉื ืงืึทื ืคืืืืขืจืืืฉืึทื.
ืืขืจื ืึธื ืืืจ ืืึทืจืคึฟื ืฆื ืืืืื ืึท ืืขืฉืขืขื ืืฉ ืืืกื ืขืจ ืฆื ืงืึธืืคึผืึธื ืขื ืDidMount (), ืืขืจ ืขืืขืืขื ื ืืืขื ืืขืจื ืคึฟืึทืจ ืืขืจืืืึทื ืืืงืื ืืขื ืืื ืจืืคื handleLocalizationChange () ืืืขื ืืื ืคึผืึทืกืืจื.
ืื ืืึทื ืืืขืืึธืงืึทืืืืึทืืืึธื ืืฉืึทื ืืข () ืืืคึฟื ืึทืงืืึทืืืืืฅ setI18nConfig () ืืื ืคืึธืจืกืขืืคึผืืึทืืข (). ืืึธืก ืืื ื ืืืืืง ืคึฟืึทืจ ืึทื ืืจืืื ืืขืืืืกืขืก, ืืืืึทื ืื ืงืึธืืคึผืึธื ืขื ื ืืืื ืืืื ืจืขื ืืขืจื ืคึฟืึทืจ ืื ืขื ืืขืจืื ืืขื ืฆื ืืืื ืืืืขืจืงื.
ืืขืจื ืึธื ืืืจ ืืึทืจืคึฟื ืฆื ืืึทืืืึทืืืงื ืื ืฆืืืขืืขืจื ืคืื ืื componentWillUnmount () ืืืคึฟื.
ืฆืื ืกืืฃ, render () ืงืขืจื ืืขืื ืืืจื ื ืืฆื translate () ืืื ืึทืืื ื ืึท ืฉืืืกื ืคึผืึทืจืึทืืขืืขืจ ืฆื ืขืก. ื ืึธื ืื ืกืืขืคึผืก, ืื ืึทืคึผืืึทืงืืืฉืึทื ืืืขื ืงืขื ืขื ืฆื "ืคึฟืึทืจืฉืืืื" ืืืึธืก ืฉืคึผืจืึทื ืืื ืืืจืฃ ืืื ืืืืึทืื ืึทืจืืืงืืขื ืืื ืขืก.
ืงืึทืืขืจ ืคืื ืึทืคึผืืึทืงืืืฉืึทื
ืืืฆื ืืื ืื ืฆืืื ืฆื ืงืึธื ืืจืึธืืืจื ืืื ืื ืืืืขืจืืขืฆืื ื ืึทืจืืขื.
ืขืจืฉืืขืจ, ืืืจ ืงืึทืืขืจ ืื ืึทืคึผืืึทืงืืืฉืึทื ืืื ืื ืกืืืืึทืืืืืขืจ ืึธืืขืจ ืขืืืืึทืืึธืจ ืืืจื ืืืืคึผืื ื
$ ืจืขืึทืืืจื-ืืขืืืืจื ืืืืคื-ืืึธืก
$ ืจืขืึทืืืจื-ืืขืืืืจื ืืืืคื-ืึทื ืืจืืื
ืขืก ืืืขื ืงืืงื ืขืคึผืขืก ืืื ืืึธืก:
ืืืฆื ืืืจ ืงืขื ืขื ืคึผืจืืืืจื ืฆื ืืืืฉื ืื ืฉืคึผืจืึทื ืฆื ืคืจืื ืฆืืืืืฉ ืืืจื ืงืึทืืขืจ ืื ืึทืคึผืืึทืงืืืฉืึทื.
ืืืจ ืืึธื ืื ืืขืืืข ืืึทื ืืื ืึทืจืึทืืืฉ, ืขืก ืืื ืงืืื ืืืืืง.
ืึทืืื ืืืืึทื ืึทืืื ืืื.
ืึธืืขืจ ืืืึธืก ืืึทืคึผืึทื ื ืืืื ืืืจ ืืืืกืงืืืึทืื ืึท ืืจืึทืค - ืฉืคึผืจืึทื ืคึฟืึทืจ ืืืึธืก ืขืก ืืื ืงืืื ืืืืขืจืืขืฆืื ื ืืื ืื ืึทืคึผืืึทืงืืืฉืึทื?
ืขืก ืืืจื ืก ืืืืก ืึทื ืื ืึทืจืืขื ืคืื findBestLanguage ืืื ืฆื ืฆืืฉืืขืื ืื ืึธืคึผืืืืึทื ืืืืขืจืืขืฆืื ื ืคืื ืึทืืข ืื ืืืฆื. ืืื ืึท ืจืขืืืืืึทื, ืื ืคืขืืืงืืึทื ืฉืคึผืจืึทื ืืืขื ืืืื ืืขืืืืื.
ืืืจ ืืขื ืขื ืืขืจืขืื ืืืขืื ืืขืืขืคืึธื ืกืขืืืื ืืก. ืคึฟืึทืจ ืืืึทืฉืคึผืื, ืืื ืื ืืึธืก ืขืืืืึทืืึธืจ ืืืจ ืงืขื ืขื ืืขื ืื ืกืืจ ืคืื ืฉืคึผืจืึทืื.
ืืืื ืื ืืืืกืืขืงืืืื ืฉืคึผืจืึทื ืืื ื ืืฉื ืื ืืืืืขืจ ืฉืคึผืจืึทื, findBestAvailableLanguage ืงืขืจื ืึทื ืืืคืืื ื ืึทืืื ืึทื ืื ืคืขืืืงืืึทื ืฉืคึผืจืึทื ืืื ืืขืืืืื.
ืืึธื ืืก
react-native-localize ืืื ืึทื API ืืืึธืก ืืื ืึทืงืกืขืก ืฆื ืึท ืืจืืืก ื ืืืขืจ ืคืื ืฉืคึผืจืึทื ืขืืขืืขื ืื. ืืืืืขืจ ืืืจ ืึธื ืืืืื ืึทืจืืขืื, .
ืคืืื ืืื ืื
ืื ืึทืคึผืืึทืงืืืฉืึทื ืงืขื ืขื ืืืื ืืขืืืื ืืึทืืืืืืื ืืืืึทื ืึธื ืงืืื ืคืจืืืืขืืขื. React-native-localize ืืื ืึท ืืจืืืก ืึธืคึผืฆืืข ืืืึธืก ืึทืืึทืื ืืืจ ืฆื ืืงืกืคึผืึทื ื ืื ืืึทื ืืฆืขืจ ืืึทืืข ืคืื โโืืืื ืึทืคึผ.
ืคึผืจืึธืืขืงื ืืงืืจ ืงืึธื .
Skillbox ืจืขืงืึทืืขื ืื:
- ืฆืืืื-ืืึธืจ ืคึผืจืึทืงืืืฉ ืงืืจืก .
- ืึธื ืืืื ืงืืจืก .
- ืคึผืจืึทืงืืืฉ ืืึธืจ ืงืืจืก .
ืืงืืจ: www.habr.com