Sau ib daim ntawv thov ntau hom lus hauv React Native

Cov khoom lag luam hauv cheeb tsam tseem ceeb heev rau cov tuam txhab thoob ntiaj teb tshawb nrhiav lub teb chaws tshiab thiab thaj chaw. Ib yam li ntawd, localization yog xav tau rau cov ntawv thov mobile. Yog tias tus tsim tawm pib nthuav dav thoob ntiaj teb, nws yog ib qho tseem ceeb kom muab cov neeg siv los ntawm lwm lub teb chaws los ua haujlwm nrog kev sib txuas hauv lawv hom lus. Hauv tsab xov xwm no, peb yuav tsim ib daim ntawv thov React Native siv lub pob react-native-localize.

Skillbox pom zoo: Kev kawm online chav kawm "Profession Java developer".
Peb nco qab: rau txhua tus neeg nyeem Habr - 10 ruble luv nqi thaum tso npe rau hauv ib chav kawm Skillbox siv Habr promo code.

Cov cuab yeej thiab kev txawj ntse

Txhawm rau nkag siab txog kab lus no, koj xav tau kev txawj ntse hauv kev ua haujlwm nrog React Native. Txhawm rau paub koj tus kheej nrog cov kev teeb tsa ntawm lub tshuab ua haujlwm, koj tuaj yeem ua tau siv cov lus qhia raug cai.

Peb yuav xav tau cov versions ntawm software cuab yeej:

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

Pib

Peb yuav tsim ib daim ntawv thov uas yuav txhawb Askiv, Fabkis thiab Arabic. Ua ntej peb tsim ib qhov project tshiab siv react-native-cli. Txhawm rau ua qhov no, koj yuav tsum ntaus qhov no hauv lub davhlau ya nyob twg:

$ react-native init multiLanguage
$ cd multiLanguage

Ntxiv cov tsev qiv ntawv tsim nyog

Thawj kauj ruam yog rau nruab react-native-localize los ntawm kev ntaus cov hauv qab no:
$ yarn ntxiv react-native-localize

Yog hais tias muaj teeb meem tshwm sim thaum lub installation txheej txheem, Nws yog tsim nyog nyeem phau ntawv installation.

Lub tsev qiv ntawv react-native-localize muab cov neeg tsim khoom nkag mus rau ntau hom lus. Tab sis nws xav tau ib lub tsev qiv ntawv ntxiv - i18n.

Kab lus no piav txog kev siv kuv 18n txhawm rau muab kev txhais lus rau hauv JavaScript.

$ xov ntxiv i18n-js

Zoo, txij li i18n-js tsis muab caching lossis memoization, kuv xav kom siv lodash.memoize rau qhov no:

$ xov ntxiv lodash.memoize

Ua haujlwm nrog kev txhais lus

Txhawm rau kom daim ntawv thov tuaj yeem ua haujlwm nrog lwm yam lus, koj yuav tsum xub tsim cov ntawv txhais lus hauv src, tom qab ntawd peb JSON cov ntaub ntawv rau txhua hom lus.

1. en.json rau lus Askiv;

2. fr.json rau Fabkis;

3. ar.json rau Arabic.

Cov ntaub ntawv no muaj cov khoom JSON nrog cov yuam sij thiab qhov tseem ceeb. Tus yuam sij yuav zoo ib yam rau txhua hom lus. Nws yog siv los ntawm daim ntawv thov los tso saib cov ntaub ntawv.

Tus nqi yog cov ntawv nyeem uas yuav tsum tau qhia rau tus neeg siv.

Lus Askiv:

{"nyob zoo": "Nyob zoo ntiaj teb!"}

Fabkis

{"nyob zoo": "Salute le Monde!"}

Арабский

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

Koj tuaj yeem ntxiv lwm yam lus tib yam.

Main code

Nyob rau ntawm no, koj yuav tsum qhib App.js cov ntaub ntawv thiab ntxiv imports rau nws:

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

Tom qab qhov no, cov haujlwm pabcuam thiab qhov tsis tu ncua ntxiv uas yuav pab tau tom qab.

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

Zoo, tam sim no cia peb tsim ib feem ntawm App chav kawm:

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

Thawj lub caij, setI18nConfig(), teeb tsa thawj zaug.

Tom qab ntawd koj yuav tsum tau ntxiv ib qho kev tshwm sim mloog rau componentDidMount(), lub caij no yuav mloog kev hloov tshiab thiab hu rau handleLocalizationChange() thaum lawv tshwm sim.

Txoj kev handleLocalizationChange() qhib setI18nConfig() thiab forceUpdate(). Qhov no yog qhov tsim nyog rau cov khoom siv hauv Android vim tias cov khoom siv yuav tsum tau muab rau cov kev hloov pauv kom pom tseeb.

Tom qab ntawd koj yuav tsum tshem tawm cov kev mloog los ntawm lub componentWillUnmount() txoj kev.

Thaum kawg, render() rov qab nyob zoo los ntawm kev siv txhais lus () thiab ntxiv qhov tseem ceeb rau nws. Tom qab cov kauj ruam no, daim ntawv thov yuav tuaj yeem "nkag siab" yam lus xav tau thiab tso tawm cov lus hauv nws.

Tso npe thov

Tam sim no yog lub sijhawm los xyuas seb qhov kev txhais lus ua haujlwm li cas.

Ua ntej, peb tso daim ntawv thov hauv simulator lossis emulator los ntawm kev ntaus ntawv

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

Nws yuav zoo li no:

Tam sim no koj tuaj yeem sim hloov cov lus rau Fab Kis los ntawm kev pib ua daim ntawv thov.

Peb ua tib yam nrog Arabic, tsis muaj qhov sib txawv.

Txog tam sim no zoo.

Tab sis yuav ua li cas yog tias koj xaiv ib hom lus uas tsis muaj kev txhais lus hauv daim ntawv thov?

Nws hloov tawm tias txoj haujlwm ntawm findBestLanguage yog los muab cov lus txhais zoo tshaj plaws los ntawm txhua tus muaj. Yog li ntawd, lub neej ntawd lus yuav tshwm sim.

Peb tab tom tham txog kev teeb tsa xov tooj. Piv txwv li, hauv iOS emulator koj tuaj yeem pom qhov kev txiav txim ntawm cov lus.

Yog hais tias cov lus xaiv tsis yog hom lus uas nyiam, findBestAvailableLanguage rov qab tsis tau txhais kom meej tias cov lus ua ntej tau tshwm sim.

Nyiaj Tswb

react-native-localize muaj API uas muab kev nkag mus rau ntau hom lus. Ua ntej koj pib ua haujlwm, Nws tsim nyog xyuas cov ntaub ntawv.

tshawb pom

Daim ntawv thov tuaj yeem ua ntau hom lus yam tsis muaj teeb meem. React-native-localize yog qhov kev xaiv zoo uas tso cai rau koj los nthuav koj lub app tus neeg siv lub hauv paus.

Qhov project source code nyob ntawm no.

Skillbox pom zoo:

• Ob xyoos xyaum xyaum "Kuv yog PRO web developer".
• Hoob kawm online "C# developer los ntawm kos".
• Cov chav kawm xyaum ua ib xyoos "PHP tus tsim tawm los ntawm 0 rau PRO".

Tau qhov twg los: www.hab.com