නව රටවල් සහ කලාප ගවේෂණය කරන ජාත්‍යන්තර සමාගම් සඳහා නිෂ්පාදන දේශීයකරණය ඉතා වැදගත් වේ. ඒ හා සමානව, ජංගම යෙදුම් සඳහා දේශීයකරණය අවශ්ය වේ. සංවර්ධකයෙකු ජාත්‍යන්තර ව්‍යාප්තිය ආරම්භ කරන්නේ නම්, වෙනත් රටක පරිශීලකයින්ට ඔවුන්ගේ මව් භාෂාවෙන් අතුරු මුහුණත සමඟ වැඩ කිරීමට අවස්ථාව ලබා දීම වැදගත් වේ. මෙම ලිපියෙන්, අපි පැකේජය භාවිතයෙන් React Native යෙදුමක් සාදන්නෙමු .
Skillbox නිර්දේශ කරයි: අධ්‍යාපනික මාර්ගගත පාඨමාලාව .
අපි ඔබට මතක් කරමු: "Habr" හි සියලුම පාඨකයින් සඳහා - "Habr" ප්‍රවර්ධන කේතය භාවිතයෙන් ඕනෑම Skillbox පාඨමාලාවකට ලියාපදිංචි වන විට රූබල් 10 ක වට්ටමක්.
මෙවලම් සහ කුසලතා
මෙම ලිපිය තේරුම් ගැනීමට, ඔබට React Native සමඟ වැඩ කිරීමේ මූලික කුසලතා අවශ්ය වේ. වැඩ කරන යන්ත්රයේ සැකසුම් සමඟ ඔබ හුරුපුරුදු වීමට, ඔබට හැකිය .
අපට මෘදුකාංග මෙවලම්වල මෙම අනුවාද අවශ්ය වනු ඇත:
- නෝඩ් v10.15.0
- npm 6.4.1
- නූල් 1.16.0
- ප්රතික්රියා-දේශීය 0.59.9
- ප්රතික්රියා-දේශීය-දේශීයකරණය 1.1.3
- i18n-js 3.3.0
ආරම්භ කිරීම
අපි ඉංග්රීසි, ප්රංශ සහ අරාබි සඳහා සහය දක්වන යෙදුමක් සාදන්නෙමු. මුලින්ම අපි react-native-cli භාවිතයෙන් නව ව්‍යාපෘතියක් නිර්මාණය කරමු. මෙය සිදු කිරීම සඳහා, ඔබ මෙය ටර්මිනලයේ ටයිප් කළ යුතුය:
$ react-native init බහුභාෂා
$ cd බහු භාෂා
අවශ්ය පුස්තකාල එකතු කිරීම
පළමු පියවර වන්නේ පහත සඳහන් දේ ටයිප් කිරීමෙන් 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 වස්තු අඩංගු වේ. එක් එක් භාෂාව සඳහා යතුර සමාන වේ. එය පෙළ තොරතුරු පෙන්වීමට යෙදුම විසින් භාවිතා කරයි.
අගය යනු පරිශීලකයාට පෙන්විය යුතු පෙළයි.
ඉංග්රීසි:
{"hello": "Hello World!"}
ප්රංශ
{"hello": "Salut le Monde!"}
අරාබි
{ "ආයුබෝවන්": "أهلاً بالعالم"}
ඔබට වෙනත් භාෂා එකම ආකාරයකින් එකතු කළ හැකිය.
ප්රධාන කේතය
මෙම අවස්ථාවේදී, ඔබ 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() අමතන්න.
handleLocalizationChange() ක්‍රමය setI18nConfig() සහ forceUpdate() සක්‍රිය කරයි. වෙනස්කම් කැපී පෙනෙන ලෙස සඳහා සංරචකය විදැහුම් කළ යුතු බැවින් මෙය Android උපාංග සඳහා අවශ්ය වේ.
එවිට ඔබ සංරචකWillUnmount() ක්රමයෙන් සවන්දීම ඉවත් කළ යුතුය.
අවසාන වශයෙන්, translate() භාවිතා කර එයට යතුරු පරාමිතියක් එක් කිරීමෙන් render() hello ලබා දෙයි. මෙම පියවරෙන් පසු, යෙදුමට අවශ්ය භාෂාව “තේරුම් ගැනීමට” සහ එහි පණිවිඩ පෙන්වීමට හැකි වේ.
යෙදුම් දියත් කිරීම
පරිවර්තනය ක්‍රියාත්මක වන ආකාරය පරීක්ෂා කිරීමට දැන් කාලයයි.
පළමුව, අපි ටයිප් කිරීමෙන් සිමියුලේටරය හෝ ඉමුලේටරය තුළ යෙදුම දියත් කරමු
$ react-native run-ios
$ react-native run-android
එය මේ වගේ දෙයක් පෙනෙනු ඇත:
දැන් ඔබට යෙදුම දියත් කිරීමෙන් භාෂාව ප්රංශ භාෂාවට වෙනස් කිරීමට උත්සාහ කළ හැකිය.
අපි අරාබියෙන් කරන්නේ එකම දෙයයි, වෙනසක් නැත.
මේ වනතෙක් ගොඩක් හොඳයි.
නමුත් යෙදුමේ පරිවර්තනයක් නොමැති අහඹු භාෂාවක් ඔබ තෝරා ගන්නේ නම් කුමක් සිදුවේද?
FindBestLanguage හි කර්තව්‍යය වන්නේ පවතින සියල්ලෙන් ප්‍රශස්ත පරිවර්තනයක් සැපයීම බව පෙනී යයි. එහි ප්රතිඵලයක් වශයෙන්, පෙරනිමි භාෂාව පෙන්වනු ඇත.
අපි කතා කරන්නේ දුරකථන සැකසුම් ගැන. උදාහරණයක් ලෙස, iOS ඉමුලේටරය තුළ ඔබට භාෂා අනුපිළිවෙල දැකිය හැකිය.
තෝරාගත් භාෂාව කැමති භාෂාව නොවේ නම්, findBestAvailableLanguage පෙරනිමි භාෂාව පෙන්වන පරිදි අර්ථ දැක්වීමකින් තොරව ලබා දෙයි.
පාරිතෝෂිකය
react-native-localize හට භාෂා මූලද්‍රව්‍ය විශාල සංඛ්‍යාවකට ප්‍රවේශය සපයන API එකක් ඇත. ඔබ වැඩ ආරම්භ කිරීමට පෙර, .
සොයා ගැනීම්
යෙදුම කිසිදු ගැටළුවක් නොමැතිව බහුභාෂා කළ හැක. React-native-localize යනු ඔබේ යෙදුමේ පරිශීලක පදනම පුළුල් කිරීමට ඔබට ඉඩ සලසන විශිෂ්ට විකල්පයකි.
ව්යාපෘති මූලාශ්ර කේතය .
Skillbox නිර්දේශ කරයි:
- වසර දෙකක ප්‍රායෝගික පාඨමාලාව .
- මාර්ගගත පාඨමාලාව .
- ප්‍රායෝගික වසර පාඨමාලාව .
මූලාශ්රය: www.habr.com