🥇Ons skryf 'n meertalige toepassing op React Native

Die lokalisering van produkte is baie belangrik vir internasionale maatskappye wat nuwe lande en streke ontwikkel. Net so is lokalisering nodig vir mobiele toepassings. As 'n ontwikkelaar met internasionale uitbreiding begin, is dit belangrik om gebruikers van 'n ander land die geleentheid te gee om met die koppelvlak in hul moedertaal te werk. In hierdie artikel sal ons 'n React Native-toepassing skep deur die pakket te gebruik reageer-inheems-lokaliseer.

Skillbox beveel aan: Opvoedkundige aanlyn kursus "Beroep Java Ontwikkelaar".
Ons herinner: vir alle lesers van "Habr" - 'n afslag van 10 000 roebels wanneer u inskryf vir enige Skillbox-kursus met behulp van die "Habr"-promosiekode.

Gereedskap en vaardighede

Om hierdie artikel te verstaan, vereis basiese React Native-vaardighede. Om vertroud te raak met die instellings van die werkende masjien, kan jy gebruik amptelike instruksies.

Ons benodig hierdie weergawes van sagteware gereedskap:

Node v10.15.0
npm 6.4.1
garing 1.16.0
reageer-inheems 0.59.9
reageer-inheems-lokaliseer 1.1.3
i18n-js 3.3.0

Aan die gang

Ons sal 'n toepassing skep wat Engels, Frans en Arabies sal ondersteun. Eerstens skep ons 'n nuwe projek met behulp van react-native-cli. Om dit te doen, moet u dit in die terminaal tik:

$ reageer-inheemse init multiLanguage
$ cd meertalige

Voeg die vereiste biblioteke by

Die eerste stap is om react-native-localize te installeer deur die volgende in te tik:
$ yarn voeg reageer-inheems-lokaliseer

As u probleme ondervind tydens die installasieproses, kyk na die installasie handleiding.

Die reageer-inheemse-lokaliseer-biblioteek gee die ontwikkelaar toegang tot veeltalige kenmerke. Maar sy het 'n ander biblioteek nodig - i18n.

Die artikel beskryf die gebruik I18n.js om vertaling in JavaScript te verskaf.

$ garing voeg i18n-js

Wel, aangesien i18n-js nie kas of memorisering verskaf nie, stel ek voor om lodash.memoize hiervoor te gebruik:

$ garing voeg lodash.memoize

Werk met vertalings

Om die toepassing goed met ander tale te laat werk, moet u eers 'n vertalingsgids binne src skep, dan drie JSON-lêers vir elk van die tale.

1. en.json vir Engels;

2. fr.json vir Frans;

3. ar.json vir Arabies.

Hierdie lêers bevat JSON-voorwerpe met sleutels en waardes. Die sleutel sal dieselfde wees vir elke taal. Dit word deur die toepassing gebruik om tekstuele inligting te vertoon.

Waarde (waarde) is die teks wat aan die gebruiker gewys moet word.

Engels:

{ "hello": "Hallo wêreld!"}

Французский

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

Арабский

{ "hallo": "Daarom"}

Ander tale kan op dieselfde manier bygevoeg word.

Hoofkode

Op hierdie stadium moet jy die App.js-lêer oopmaak en invoere daarby voeg:

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

Daarna word hulpfunksies en konstantes bygevoeg, wat later nuttig sal wees.

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

Wel, laat ons nou 'n komponent van die App-klas skep:

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

Die eerste element, setI18nConfig(), stel die aanvanklike konfigurasie.

Dan in componentDidMount() moet ons gebeurtenisluisteraars byvoeg, hierdie element sal luister vir opdaterings en handleLocalizationChange() oproep wanneer dit voorkom.

Die handleLocalizationChange()-metode roep setI18nConfig() en forceUpdate() op. Dit is nodig vir Android-toestelle, aangesien die komponent weergegee moet word sodat die veranderinge sigbaar kan word.

Dan moet ons die luisteraar van die componentWillUnmount() metode verwyder.

Laastens word hallo teruggestuur in render() deur translate() te gebruik en 'n sleutelparameter daarby te voeg. Na hierdie stappe sal die toepassing in staat wees om te "verstaan" watter taal benodig word en boodskappe daarin wys.

Die bekendstelling van die program

Dit is nou die tyd om te kyk hoe die vertaling werk.

Eers loop ons die toepassing in die simulator of emulator deur te tik

$ reageer-inheemse run-ios
$ reageer-inheemse run-android

Dit sal so iets lyk:

Nou kan jy probeer om die taal na Frans te verander deur die toepassing te begin.

Ons doen dieselfde met die Arabiese taal, daar is geen verskil nie.

Tot dusver gaan alles goed.

Maar wat gebeur as jy 'n ewekansige taal kies wat nie 'n vertaling in die toepassing het nie?

Dit blyk dat die taak van findBestLanguage is om die beste moontlike vertaling van alle beskikbare te verskaf. Gevolglik sal die taal wat by verstek gestel is, vertoon word.

Dit gaan oor telefooninstellings. So, byvoorbeeld, in die iOS-emulator, kan jy die volgorde van tale sien.

As die geselekteerde taal nie die voorkeurtaal is nie, gee findBestAvailableLanguage ongedefinieerd terug sodat die verstektaal gewys word.

Bonus

react-native-localize het 'n API wat toegang bied tot 'n groot aantal taalelemente. Voordat jy begin werk, dit is die moeite werd om die dokumentasie te lees.

Bevindinge

Die toepassing kan sonder enige probleme veeltalig gemaak word. React-native-localize is 'n wonderlike opsie waarmee u die reeks gebruikers van u toepassing kan uitbrei.

Projek bronkode hier geleë is.

Skillbox beveel aan:

Twee-jaar praktiese kursus "Ek is 'n PRO-webontwikkelaar".

Aanlyn kursus "C# ontwikkelaar van nuuts af".

Praktiese jaarkursus "PHP-ontwikkelaar van 0 tot PRO".

Bron: will.com

Ons skryf 'n meertalige toepassing op React Native