🥇Manoratra fampiharana amin'ny fiteny maro izahay amin'ny React Native

Tena zava-dehibe ho an'ny orinasa iraisam-pirenena mikaroka firenena sy faritra vaovao ny fametrahana ny vokatra. Toy izany koa, ilaina ny localization ho an'ny fampiharana finday. Raha manomboka fanitarana iraisam-pirenena ny developer iray, dia zava-dehibe ny manome fahafahana ireo mpampiasa avy amin'ny firenena hafa hiara-miasa amin'ny interface amin'ny fitenin-drazany. Amin'ity lahatsoratra ity dia hamorona rindranasa React Native mampiasa ny fonosana isika react-native-localize.

Skillbox dia manoro hevitra: Fampianarana an-tserasera "Profession Java Developer".
Mampahatsiahy izahay: ho an'ny mpamaky rehetra ny "Habr" - fihenam-bidy 10 roubles rehefa misoratra anarana amin'ny taranja Skillbox rehetra mampiasa ny code promotional "Habr".

Fitaovana sy fahaiza-manao

Mba hahatakarana ity lahatsoratra ity dia mila fahaiza-manao fototra ianao amin'ny fiaraha-miasa amin'ny React Native. Mba hahafantaranao ny toetry ny milina miasa, azonao atao ampiasao ny torolàlana ofisialy.

Mila ireto fitaovana rindrambaiko ireto izahay:

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

Manomboka

Hamorona fampiharana izay hanohana ny teny anglisy, frantsay ary arabo izahay. Voalohany dia mamorona tetikasa vaovao mampiasa react-native-cli. Mba hanaovana izany dia mila manoratra ity amin'ny terminal ianao:

$ react-native init multiLanguage
$ cd multilanguage

Manampy ireo tranomboky ilaina

Ny dingana voalohany dia ny fametrahana react-native-localize amin'ny fanoratana ireto manaraka ireto:
$ yarn add react-native-localize

Raha misy olana mitranga mandritra ny dingana fametrahana, Tsara ny mamaky ny boky fametrahana.

Ny tranomboky react-native-localize dia manome ny mpamorona ny fidirana amin'ny endri-javatra amin'ny fiteny maro. Saingy mila tranomboky iray hafa izy - i18n.

Ity lahatsoratra ity dia mamaritra ny fampiasana I18n.js mba hanomezana dikanteny amin'ny JavaScript.

$ yarn ampio i18n-js

Eny, satria i18n-js tsy manome caching na fahatsiarovana, dia manoro hevitra aho ny hampiasa lodash.memoize amin'ity:

$ yarn ampio lodash.memoize

Miasa amin'ny fandikan-teny

Mba hahafahan'ny fampiharana miasa amin'ny fiteny hafa dia mila mamorona lahatahiry fandikan-teny ao anaty src ianao, avy eo rakitra JSON telo isaky ny fiteny.

1. en.json amin'ny teny anglisy;

2. fr.json amin'ny teny frantsay;

3. ar.json amin'ny teny arabo.

Ireo rakitra ireo dia misy zavatra JSON misy fanalahidy sy soatoavina. Ny fanalahidy dia hitovy amin'ny fiteny tsirairay. Izy io dia ampiasain'ny fampiharana hanehoana fampahalalana amin'ny lahatsoratra.

Ny sanda dia ny lahatsoratra mila aseho amin'ny mpampiasa.

Anglisy:

{"hello": "Manahoana izao tontolo izao!"}

frantsay

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

Arabo

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

Azonao atao ny manampy fiteny hafa amin'ny fomba mitovy.

Kaody fototra

Amin'izao fotoana izao, mila manokatra ny rakitra App.js ianao ary ampio fanafarana azy:

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

Aorian'izany dia ampiana ireo fiasa fanampiny sy tsy miova izay ho ilaina any aoriana.

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

Eny ary, andeha isika hamorona singa iray amin'ny kilasy 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
  }
});

Ny singa voalohany, setI18nConfig(), dia mametraka ny configuration voalohany.

Avy eo ianao dia mila manampy mpihaino hetsika amin'ny componentDidMount (), ity singa ity dia hihaino ny fanavaozana ary hiantso ny handleLocalizationChange () rehefa mitranga izany.

Ny fomba handleLocalizationChange() dia manetsika ny setI18nConfig() sy forceUpdate(). Ilaina izany ho an'ny fitaovana Android satria tsy maintsy adika ny singa mba ho tsikaritra ny fiovana.

Avy eo dia mila manala ny fihainoana amin'ny fomba componentWillUnmount().

Farany, ny render() dia mamerina miarahaba amin'ny fampiasana translate() ary manampy paramètre lehibe aminy. Aorian'ireo dingana ireo dia ho afaka "mahatakatra" ny fiteny ilaina ny fampiharana ary mampiseho hafatra ao anatiny.

Fandefasana fampiharana

Fotoana izao hijerena ny fomba fiasan'ny fandikan-teny.

Voalohany, manomboka ny fampiharana amin'ny simulator na emulator isika amin'ny fanoratana

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

Ho toy izao izany:

Azonao atao izao ny manandrana manova ny fiteny ho frantsay amin'ny alàlan'ny fandefasana ny fampiharana.

Toy izany koa no ataontsika amin'ny Arabo, tsy misy fahasamihafana.

Hatreto aloha dia mbola mety tsara.

Fa inona no mitranga raha misafidy fiteny kisendrasendra izay tsy misy dikanteny ao amin'ny fampiharana ianao?

Hita fa ny andraikitry ny findBestLanguage dia ny manome ny fandikan-teny tsara indrindra avy amin'ireo rehetra misy. Vokatr'izany dia haseho ny fiteny mahazatra.

Fametrahana telefaona no resahinay. Ohatra, ao amin'ny emulator iOS ianao dia afaka mahita ny filaharan'ny fiteny.

Raha tsy ilay fiteny nofantenana no fiteny tiana, findBestAvailableLanguage dia miverina tsy voafaritra mba haseho ny fiteny mahazatra.

Bonus

react-native-localize dia manana API izay manome fidirana amin'ny singa fiteny marobe. Alohan'ny hanombohanao asa, Tena ilaina ny mijery ny antontan-taratasy.

hitany

Ny fampiharana dia azo atao amin'ny fiteny maro tsy misy olana. React-native-localize dia safidy tsara ahafahanao manitatra ny fototry ny mpampiasa anao.

Kaody loharanon'ny tetikasa eto.

Skillbox dia manoro hevitra:

Taranja azo ampiharina roa taona "Izaho dia mpamorona tranonkala PRO".

Mazava ho azy amin'ny Internet "C# developer from scratch".

Taranja fanao isan-taona "mpamorona PHP manomboka amin'ny 0 mankany PRO".

Source: www.habr.com

Manoratra fampiharana amin'ny fiteny maro amin'ny React Native