ProHoster > Blog > Interneteko albisteak > Aplikazio eleaniztun bat idaztea React Native-n

Aplikazio eleaniztun bat idaztea React Native-n

Aplikazio eleaniztun bat idaztea React Native-n

Produktuen lokalizazioa oso garrantzitsua da herrialde eta eskualde berriak esploratzen dituzten nazioarteko enpresentzat. Era berean, mugikorretarako aplikazioetarako lokalizazioa beharrezkoa da. Garatzaile batek nazioarteko hedapena hasten badu, garrantzitsua da beste herrialde bateko erabiltzaileei interfazearekin beren jatorrizko hizkuntzan lan egiteko aukera ematea. Artikulu honetan, React Native aplikazio bat sortuko dugu paketea erabiliz erreakzionatu-natiboa-lokalizatu.

Skillbox-ek gomendatzen du: Hezkuntza online ikastaroa "Lanbideko Java garatzailea".
Gogoratzen dugu: "Habr" irakurle guztientzat - 10 errubloko deskontua "Habr" promozio-kodea erabiliz Skillbox-eko edozein ikastarotan izena ematean.

Tresnak eta trebetasunak

Artikulu hau ulertzeko, React Native-rekin lan egiteko oinarrizko trebetasunak behar dituzu. Lan-makinaren ezarpenak ezagutzeko, egin dezakezu argibide ofizialak erabili.

Software tresnen bertsio hauek beharko ditugu:

  • Nodoa v10.15.0
  • npm 6.4.1
  • haria 1.16.0
  • erreakzio-natiboa 0.59.9
  • erreakzionatu-natiboa-lokalizatu 1.1.3
  • i18n-js 3.3.0

Lehen urratsak

Ingelesa, frantsesa eta arabiera onartzen dituen aplikazio bat sortuko dugu. Lehenik eta behin proiektu berri bat sortuko dugu react-native-cli erabiliz. Horretarako, hau idatzi behar duzu terminalean:

$ react-native init multiLanguage
$ cd MultiLanguage

Beharrezko liburutegiak gehitzea

Lehenengo urratsa react-native-localize instalatzea da, honako hau idatziz:
$ yarn add react-native-localize

Instalazio prozesuan arazoak gertatzen badira, Instalazio eskuliburua irakurtzea merezi du.

react-native-localize liburutegiak garatzaileari funtzio eleaniztunetarako sarbidea ematen dio. Baina liburutegi bat gehiago behar du - i18n.

Artikulu honek erabilera deskribatzen du I18n.js JavaScript-era itzulpena eskaintzeko.

$ yarn gehitu i18n-js

Beno, i18n-js-ek ez du caching edo memorizazioa eskaintzen, horretarako lodash.memoize erabiltzea gomendatzen dut:

$ yarn gehitu lodash.memoize

Itzulpenekin lan egitea

Aplikazioak beste hizkuntza batzuekin lan egin ahal izateko, lehenik eta behin itzulpen-direktorio bat sortu behar duzu src barruan, ondoren hiru JSON fitxategi hizkuntza bakoitzeko.

1. en.json ingeleserako;

2. fr.json frantseserako;

3. ar.json arabierarako.

Fitxategi hauek gako eta balioekin JSON objektuak dituzte. Gakoa berdina izango da hizkuntza bakoitzarentzat. Aplikazioak testu-informazioa bistaratzeko erabiltzen du.

Balioa erabiltzaileari erakutsi behar zaion testua da.

Ingelesa:

{"hello": "Kaixo Mundua!"}

Ѐранцузский

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

Арабский

{ "kaixo": "Ψ£Ω‡Ω„Ψ§Ω‹ Ψ¨Ψ§Ω„ΨΉΨ§Ω„Ω…"}

Beste hizkuntza batzuk gehi ditzakezu era berean.

Kode nagusia

Une honetan, App.js fitxategia ireki eta inportazioak gehitu behar dituzu:

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

Horren ostean, gero erabilgarriak izango diren funtzio laguntzaileak eta konstanteak gehitzen dira.

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

Tira, orain sor dezagun App klasearen osagai bat:

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

Lehenengo elementuak, setI18nConfig(), hasierako konfigurazioa ezartzen du.

Ondoren, gertaera-entzule bat gehitu behar duzu componentDidMount(), elementu honek eguneraketak entzungo ditu eta handleLocalizationChange() deituko du gertatzen direnean.

handleLocalizationChange() metodoak setI18nConfig() eta forceUpdate() aktibatzen ditu. Hau beharrezkoa da Android gailuetarako, osagaia errendatu behar baita aldaketak nabariak izan daitezen.

Ondoren, entzutea componentWillUnmount() metodotik kendu behar duzu.

Azkenik, render() kaixo itzultzen du translate() erabiliz eta gako-parametro bat gehituz. Urrats hauen ondoren, aplikazioak zein hizkuntza behar den "ulertu" eta bertan mezuak bistaratzeko gai izango da.

Aplikazioa abiaraztea

Orain itzulpenak nola funtzionatzen duen egiaztatzeko unea da.

Lehenik eta behin, aplikazioa abiarazten dugu simulagailuan edo emulatzailean idatziz

$ erreakzio-jatorrizko run-ios
$ react-native run-android
Honelako itxura izango du:

Aplikazio eleaniztun bat idaztea React Native-n

Orain saiatu zaitezke hizkuntza frantsesera aldatzen aplikazioa abiaraziz.

Aplikazio eleaniztun bat idaztea React Native-n

Arabierarekin gauza bera egiten dugu, ez dago alderik.

Orain arte ondo.

Baina zer gertatzen da aplikazioan itzulpenik ez dagoen ausazko hizkuntza bat hautatzen baduzu?

Ematen du findBestLanguage-ren zeregina eskuragarri dauden guztietatik itzulpen onena eskaintzea dela. Ondorioz, lehenetsitako hizkuntza bistaratuko da.

Telefonoaren ezarpenei buruz ari gara. Adibidez, iOS emulatzailean hizkuntzen ordena ikus dezakezu.

Aplikazio eleaniztun bat idaztea React Native-n

Hautatutako hizkuntza ez bada hizkuntza hobetsia, findBestAvailableLanguage-k undefined itzultzen du hizkuntza lehenetsia bistaratzeko.

bonus

react-native-localize-k hizkuntza-elementu askotarako sarbidea ematen duen API bat du. Lanean hasi aurretik, Merezi du dokumentazioa ikustea.

Findings

Aplikazioa eleaniztun egin daiteke arazorik gabe. React-native-localize zure aplikazioaren erabiltzaile-basea zabaltzeko aukera bikaina da.

Proiektuaren iturburu kodea hemen dago.

Skillbox-ek gomendatzen du:

Iturria: www.habr.com

Gehitu iruzkin berria