🥇Kei te tuhi matou i tetahi tono reo maha i React Native

He mea nui te whakatakotoranga hua mo nga kamupene o te ao e torotoro ana i nga whenua me nga rohe hou. Waihoki, ka hiahiatia te waahi mo nga tono waea. Mena ka timata te kaiwhakawhanake ki te whakawhānui i te ao, he mea nui kia whai waahi nga kaiwhakamahi mai i tetahi atu whenua ki te mahi me te atanga i roto i to raatau reo taketake. I roto i tenei tuhinga, ka hangaia e matou he tono React Native ma te whakamahi i te kete react-native-localize.

Ka tūtohu a Skillbox: Matauranga ipurangi "Whakawhanake Mahi Java".
Ka whakamahara matou: mo nga kaipānui katoa o "Habr" - he utu mo te 10 rubles i te wa e whakauru ana ki tetahi akoranga Skillbox ma te whakamahi i te waehere whakatairanga "Habr".

Nga taputapu me nga pukenga

Kia mohio ai koe ki tenei tuhinga, me tino mohio koe ki te mahi tahi me React Native. Kia mohio koe ki nga tautuhinga o te miihini mahi, ka taea e koe whakamahia nga tohutohu whai mana.

Ka hiahia matou ki enei putanga o nga taputapu rorohiko:

Node v10.15.0
npm 6.4.1
miro 1.16.0
tauhohe-maori 0.59.9
react-native-localize 1.1.3
i18n-js 3.3.0

Tīmata

Ka hangahia e matou he tono ka tautoko i te reo Ingarihi, French me te Arapi. Tuatahi ka hangaia he kaupapa hou ma te whakamahi i te react-native-cli. Ki te mahi i tenei, me pato koe i tenei ki te tauranga:

$ react-native init multiLanguage
$ cd reo maha

Te taapiri i nga whare pukapuka e tika ana

Ko te mahi tuatahi ko te whakauru i te react-native-localize ma te pato i enei e whai ake nei:
$ miro tāpiri react-native-localize

Mena ka puta nga raru i te wa o te whakaurunga, He pai ki te panui i te pukapuka whakaurunga.

Ko te whare pukapuka react-native-localize e tuku ana ki te kaiwhakawhanake te uru ki nga ahuatanga reo maha. Engari me kotahi ano te whare pukapuka - i18n.

Ko tenei tuhinga e whakaatu ana i te whakamahinga I18n.js kia taea ai te whakamaoritanga ki te JavaScript.

$ miro tāpiri i18n-js

Ana, i te mea kaore a i18n-js e tuku keteroki me te whakamaharatanga, ka whakaaro ahau ki te whakamahi i te lodash.memoize mo tenei:

$ miro tāpiri lodash.memoize

Te mahi me nga whakamaoritanga

Kia taea ai e te tono te mahi me etahi atu reo, me hanga e koe he raarangi whakamaoritanga ki roto src, ka toru nga konae JSON mo ia reo.

1. en.json mo te reo Ingarihi;

2. fr.json mo te reo Wīwī;

3. ar.json mo Arapi.

Kei roto i enei konae nga mea JSON me nga taviri me nga uara. Ka rite te matua mo ia reo. Ka whakamahia e te tono hei whakaatu i nga korero tuhinga.

Ko te uara ko te kuputuhi me whakaatu ki te kaiwhakamahi.

Ingarihi:

{"hello": "Kia ora te Ao!"}

French

{"hello": "Salut le Monde!"}

Арабский

{ "kia ora": "أهلاً بالعالم"}

Ka taea e koe te taapiri i etahi atu reo kia rite ano.

Waehere matua

I tenei wa, me whakatuwhera koe i te konae App.js me te taapiri i nga kawemai ki reira:

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";

I muri i tenei, ka taapirihia nga mahi awhina me nga taapiri ka whai hua i muri mai.

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;
};

Inaianei me hanga he waahanga o te akomanga 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
  }
});

Ko te huānga tuatahi, setI18nConfig(), ka whakatakoto i te whirihoranga tuatahi.

Na ka hiahia koe ki te taapiri i tetahi kaiwhakarongo takahanga ki te componentDidMount(), ka whakarongo tenei huānga ki nga whakahoutanga me te karanga i te handleLocalizationChange() ina puta.

Ko te tikanga handleLocalizationChange() ka whakahohe i te setI18nConfig() me te forceUpdate(). He mea tika tenei mo nga taputapu Android na te mea me tuku te waahanga kia kitea nga huringa.

Na me tango e koe te whakarongo mai i te tikanga componentWillUnmount().

Ka mutu, ka hoki mai a render() ki te oha ma te whakamahi i te whakamaori() me te taapiri i tetahi tawhā matua. I muri i enei mahi, ka taea e te tono te "mohio" he aha te reo e hiahiatia ana me te whakaatu i nga karere ki roto.

Te whakarewatanga tono

Ko te wa tenei ki te tirotiro me pehea te mahi o te whakamaoritanga.

Tuatahi, ka whakarewahia e matou te tono ki te simulator, emulator ranei ma te pato

$ react-maori run-ios
$ react-native run-android

Ka penei te ahua:

Inaianei ka taea e koe te huri i te reo ki French ma te whakarewa i te tono.

He rite tonu ta matou mahi ki te Arapi, kaore he rereke.

I tenei wa ka pai.

Engari ka aha mena ka kowhiria e koe he reo matapōkere karekau he whakamaoritanga i roto i te tono?

Ko te mahi a findBestLanguage ko te whakarato i te whakamaoritanga tino pai mai i nga mea katoa e waatea ana. Ko te mutunga, ka whakaatuhia te reo taunoa.

Kei te korero matou mo nga tautuhinga waea. Hei tauira, i roto i te emulator iOS ka taea e koe te kite i te raupapa o nga reo.

Ki te kore te reo i tohua i te reo pai, findBestAvailableLanguage ka hoki kore tautuhi kia whakaatuhia te reo taunoa.

Bonus

react-native-localize he API e tuku urunga ki te maha o nga huānga reo. I mua i to tiimata mahi, He pai ki te tirotiro i nga tuhinga.

kitenga

Ko te tono ka taea te hanga reo maha me te kore he raru. Ko te React-native-localize he whiringa pai e taea ai e koe te whakawhānui ake i te turanga kaiwhakamahi o to taupānga.

Waehere puna kaupapa kei konei.

Ka tūtohu a Skillbox:

E rua tau te akoranga mahi "He kaiwhakawhanake paetukutuku PRO ahau".

Akoranga aipurangi "C# kaiwhakawhanake mai i te wahanga".

Akoranga tau mahi "Whakawhanake PHP mai i te 0 ki te PRO".

Source: will.com

Te tuhi i te tono reo maha ki React Native