ProHoster > Pūnaewele > nūhou pūnaewele > Ke kākau ʻana i kahi palapala noi ma React Native

Ke kākau ʻana i kahi palapala noi ma React Native

Ke kākau ʻana i kahi palapala noi ma React Native

He mea koʻikoʻi ka localization huahana no nā hui honua e ʻimi nei i nā ʻāina a me nā ʻāina hou. Pēlā nō, pono ka localization no nā polokalamu kelepona. Inā hoʻomaka ka mea hoʻomohala i ka hoʻonui honua, pono e hāʻawi i nā mea hoʻohana mai kahi ʻāina ʻē i ka manawa e hana ai me ka interface ma kā lākou ʻōlelo maoli. Ma kēia ʻatikala, e hana mākou i kahi noi React Native me ka hoʻohana ʻana i ka pā react-native-localize.

Manaʻo ʻo Skillbox: Papa hoʻonaʻauao pūnaewele "Ka mea hoʻomohala ʻoihana Java".
Hoʻomaopopo mākou iā ʻoe: no ka poʻe heluhelu a pau o "Habr" - kahi ho'ēmi o 10 rubles i ka wā e kākau inoa ai i kekahi papa Skillbox e hoʻohana ana i ka code promotional "Habr".

Nā mea hana a me nā mākau

No ka hoʻomaopopo ʻana i kēia ʻatikala, pono ʻoe i nā mākau maʻamau i ka hana ʻana me React Native. No ka hoʻomaʻamaʻa iā ʻoe iho me nā hoʻonohonoho o ka mīkini hana, hiki iā ʻoe hoʻohana i nā kuhikuhi kūhelu.

Pono mākou i kēia mau mana o nā lako polokalamu:

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

Ua hoʻomaka

E hana mākou i kahi noi e kākoʻo i ka ʻōlelo Pelekane, Palani a me ʻAlapia. Hana mua mākou i kahi papahana hou me ka hoʻohana ʻana i ka react-native-cli. No ka hana ʻana i kēia, pono ʻoe e kākau i kēia ma ka terminal:

$ react-native init multiLanguage
$ cd ʻōlelo lehulehu

Hoʻohui i nā hale waihona puke e pono ai

ʻO ka hana mua e hoʻokomo i ka react-native-localize ma ke kākau ʻana i kēia:
$ yarn hoʻohui i ka react-native-localize

Inā loaʻa nā pilikia i ka wā o ka hoʻokomo ʻana, Pono e heluhelu i ka manual install.

Hāʻawi ka waihona react-native-localize i ka mea hoʻomohala i nā hiʻohiʻona lehulehu. Akā makemake ʻo ia i hoʻokahi waihona - i18n.

Hōʻike kēia ʻatikala i ka hoʻohana ʻana I18n.js no ka hoʻolako ʻana i ka unuhi i ka JavaScript.

$ yarn hoʻohui i18n-js

ʻAe, no ka mea ʻaʻole hāʻawi ʻo i18n-js i ka cache a me ka memoization, manaʻo wau e hoʻohana i ka lodash.memoize no kēia:

$ yarn hoʻohui i ka lodash.memoize

Ke hana nei me nā unuhi

I mea e hiki ai i ka palapala noi ke hana me nā ʻōlelo ʻē aʻe, pono ʻoe e hana i kahi papa kuhikuhi unuhi i loko o src, a laila ʻekolu faila JSON no kēlā me kēia ʻōlelo.

1. en.json no ka ʻōlelo Pelekania;

2. fr.json no Palani;

3. ar.json no ka Arabic.

Aia kēia mau faila i nā mea JSON me nā kī a me nā waiwai. E like ana ke kī no kēlā me kēia ʻōlelo. Hoʻohana ʻia e ka palapala noi e hōʻike i ka ʻike kikokikona.

ʻO ka waiwai ka kikokikona e pono e hōʻike i ka mea hoʻohana.

Pelekania:

{"hello": "Aloha honua!"}

'Ōlelo Farani

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

'Apia

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

Hiki iā ʻoe ke hoʻohui i nā ʻōlelo ʻē aʻe ma ke ʻano like.

Code nui

I kēia manawa, pono ʻoe e wehe i ka faila App.js a hoʻohui i nā mea lawe mai iā ia:

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

Ma hope o kēia, hoʻohui ʻia nā hana kōkua a me nā mea mau e pono ai ma hope.

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

ʻĀ, i kēia manawa e hana mākou i kahi ʻāpana o ka papa 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
  }
});

ʻO ka mea mua, setI18nConfig (), hoʻonohonoho i ka hoʻonohonoho mua.

A laila pono ʻoe e hoʻohui i kahi mea hoʻolohe hanana i ka componentDidMount (), e hoʻolohe kēia mea i nā mea hou a kāhea aku i ka handleLocalizationChange () ke hiki mai.

Hoʻohana ka hana handleLocalizationChange() setI18nConfig() a me forceUpdate(). Pono kēia no nā polokalamu Android no ka mea pono e hāʻawi ʻia ka ʻāpana i ʻike ʻia nā loli.

A laila pono ʻoe e wehe i ka hoʻolohe mai ka componentWillUnmount() ala.

ʻO ka hope, hoʻihoʻi ʻo render() i ke aloha me ka hoʻohana ʻana i ka unuhi () a hoʻohui i kahi ʻāpana kī iā ia. Ma hope o kēia mau ʻanuʻu, hiki i ka palapala noi ke "hoʻomaopopo" i ka ʻōlelo e pono ai a hōʻike i nā memo i loko.

Hoʻolālā noi

ʻO ka manawa kēia e nānā i ka hana o ka unuhi.

ʻO ka mea mua, hoʻomaka mākou i ka noi ma ka simulator a i ʻole emulator ma ke kākau ʻana

$ react-native run-ios
$ react-native run-android
E like me kēia:

Ke kākau ʻana i kahi palapala noi ma React Native

I kēia manawa hiki iā ʻoe ke hoʻāʻo e hoʻololi i ka ʻōlelo i ka ʻōlelo Farani ma ka hoʻomaka ʻana i ka noi.

Ke kākau ʻana i kahi palapala noi ma React Native

Hana like mākou me ka Arabic, ʻaʻohe ʻokoʻa.

I kēia manawa maikaʻi.

Akā he aha ka hopena inā koho ʻoe i kahi ʻōlelo maʻamau ʻaʻohe unuhi i ka noi?

ʻIke ʻia ʻo ka hana a findBestLanguage ʻo ia ka hāʻawi ʻana i ka unuhi maikaʻi loa mai nā mea āpau i loaʻa. ʻO ka hopena, e hōʻike ʻia ka ʻōlelo paʻamau.

Ke kamaʻilio nei mākou e pili ana i nā hoʻonohonoho kelepona. No ka laʻana, ma ka iOS emulator hiki iā ʻoe ke ʻike i ke ʻano o nā ʻōlelo.

Ke kākau ʻana i kahi palapala noi ma React Native

Inā ʻaʻole ʻo ka ʻōlelo i koho ʻia ka ʻōlelo i makemake ʻia, e hoʻi ʻo findBestAvailableLanguage me ka wehewehe ʻole ʻia i hōʻike ʻia ka ʻōlelo paʻamau.

Bonus

Loaʻa i ka react-native-localize kahi API e hāʻawi ana i ke komo ʻana i kahi helu nui o nā mea ʻōlelo. Ma mua o kou hoʻomaka ʻana i ka hana, Pono e nānā i nā palapala.

haʻina

Hiki ke hana ʻia ka noi ma nā ʻōlelo he nui me ka pilikia ʻole. ʻO React-native-localize kahi koho maikaʻi loa e hiki ai iā ʻoe ke hoʻonui i ka waihona mea hoʻohana o kāu app.

code kumu papahana aia maanei.

Manaʻo ʻo Skillbox:

Source: www.habr.com

Pākuʻi i ka manaʻo hoʻopuka