{"id":291982,"date":"2019-07-12T09:00:58","date_gmt":"2019-07-12T09:00:58","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=291982"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=291982","title":{"rendered":"\u041f\u0438\u0448\u0435\u043c \u043c\u0443\u043b\u044c\u0442\u0438\u044f\u0437\u044b\u0447\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 React Native"},"content":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d65\/2b6\/19e\/d652b619e61aaf2d1216f0f94ab533b2.jpg\"><\/p>\n<p>  \u041b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0446\u0438\u0438 \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u0430 \u0434\u043b\u044f \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439, \u043e\u0441\u0432\u0430\u0438\u0432\u0430\u044e\u0449\u0438\u0445 \u043d\u043e\u0432\u044b\u0435 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0441\u0442\u0440\u0430\u043d\u044b \u0438 \u0440\u0435\u0433\u0438\u043e\u043d\u044b. \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0443\u0436\u043d\u0430 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c. \u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u0443\u044e \u044d\u043a\u0441\u043f\u0430\u043d\u0441\u0438\u044e, \u0432\u0430\u0436\u043d\u043e \u0434\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u044b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u043d\u0430 \u0440\u043e\u0434\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 React Native, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/github.com\/react-native-community\/react-native-localize\">react-native-localize<\/a>.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<blockquote><p><b>Skillbox \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442:<\/b> \u041e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0443\u0440\u0441 <a href=\"https:\/\/skillbox.ru\/java\/?utm_source=skillbox.media&amp;utm_medium=habr.com&amp;utm_campaign=JAVDEV&amp;utm_content=articles&amp;utm_term=reactnative\">\u00ab\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Java-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u00bb<\/a>.<br \/>  <b>\u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c:<\/b> <i>\u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0435\u0439 \u00ab\u0425\u0430\u0431\u0440\u0430\u00bb \u2014 \u0441\u043a\u0438\u0434\u043a\u0430 10 000 \u0440\u0443\u0431\u043b\u0435\u0439 \u043f\u0440\u0438 \u0437\u0430\u043f\u0438\u0441\u0438 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u043a\u0443\u0440\u0441 Skillbox \u043f\u043e \u043f\u0440\u043e\u043c\u043e\u043a\u043e\u0434\u0443 \u00ab\u0425\u0430\u0431\u0440\u00bb.<\/i><\/p><\/blockquote>\n<p>  <\/p>\n<h3>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u043d\u0430\u0432\u044b\u043a\u0438<\/h3>\n<p>  \u0414\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0443\u0436\u043d\u044b \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043d\u0430\u0432\u044b\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 React Native. \u0414\u043b\u044f \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u043c\u0430\u0448\u0438\u043d\u044b \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/facebook.github.io\/react-native\/docs\/0.59\/getting-started\">\u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0435\u0439<\/a>. <\/p>\n<p>  \u041d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432:  <\/p>\n<ul>\n<li> Node v10.15.0<\/li>\n<li> npm 6.4.1<\/li>\n<li> yarn 1.16.0<\/li>\n<li> react-native 0.59.9<\/li>\n<li> react-native-localize 1.1.3<\/li>\n<li> i18n-js 3.3.0<\/li>\n<\/ul>\n<p>  <\/p>\n<h3>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c<\/h3>\n<p>  \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439, \u0444\u0440\u0430\u043d\u0446\u0443\u0437\u0441\u043a\u0438\u0439 \u0438 \u0430\u0440\u0430\u0431\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a\u0438. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f react-native-cli. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0431\u0440\u0430\u0442\u044c \u0432\u043e\u0442 \u0447\u0442\u043e:<\/p>\n<p>  <i>$ react-native init multiLanguage<br \/>  $ cd multiLanguage<\/i><\/p>\n<p>  <b>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/b><\/p>\n<p>  \u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c react-native-localize, \u043d\u0430\u0431\u0440\u0430\u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<br \/>  $ yarn add react-native-localize<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, <a href=\"https:\/\/github.com\/react-native-community\/react-native-localize#setup\">\u0441\u0442\u043e\u0438\u0442 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043c\u0430\u043d\u0443\u0430\u043b \u043f\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435<\/a>.<\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 react-native-localize \u0434\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043c\u0443\u043b\u044c\u0442\u0438\u044f\u0437\u044b\u0447\u043d\u044b\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c. \u041d\u043e \u0435\u0439 \u043d\u0443\u0436\u043d\u0430 \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u2014 i18n.<\/p>\n<p>  \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <a href=\"https:\/\/github.com\/fnando\/i18n-js\">I18n.js<\/a> \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0432 JavaScript.<\/p>\n<p>  <i>$ yarn add i18n-js<\/i><\/p>\n<p>  \u041d\u0443 \u0430 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 i18n-js \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438, \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e lodash.memoize:<\/p>\n<p>  <i>$ yarn add lodash.memoize<\/i><\/p>\n<p>  <b>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430\u043c\u0438<\/b><\/p>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0443\u043c\u0435\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u044f\u0437\u044b\u043a\u0430\u043c\u0438, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 translations \u0432\u043d\u0443\u0442\u0440\u0438 src, \u043f\u043e\u0442\u043e\u043c \u2014 \u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430 JSON, \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u044f\u0437\u044b\u043a\u043e\u0432.<\/p>\n<p>  1. en.json \u0434\u043b\u044f \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0433\u043e;<\/p>\n<p>  2. fr.json \u0434\u043b\u044f \u0444\u0440\u0430\u043d\u0446\u0443\u0437\u0441\u043a\u043e\u0433\u043e;<\/p>\n<p>  3. ar.json \u0434\u043b\u044f \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u0433\u043e.<\/p>\n<p>  \u042d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b JSON \u0441 \u043a\u043b\u044e\u0447\u0430\u043c\u0438 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438. \u041a\u043b\u044e\u0447 \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430. \u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>  \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (value) \u2014 \u044d\u0442\u043e \u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e.<\/p>\n<p>  \u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a:<\/p>\n<p>  <i>{ \u00abhello\u00bb: \u00abHello World!\u00bb}<\/i><\/p>\n<p>  \u0424\u0440\u0430\u043d\u0446\u0443\u0437\u0441\u043a\u0438\u0439<\/p>\n<p>  <i>{ \u00abhello\u00bb: \u00abSalut le Monde!\u00bb}<\/i><\/p>\n<p>  \u0410\u0440\u0430\u0431\u0441\u043a\u0438\u0439<\/p>\n<p>  <i>{ \u00abhello\u00bb: &#171;\u0623\u0647\u0644\u0627\u064b \u0628\u0627\u0644\u0639\u0627\u0644\u0645&#187;}<\/i><\/p>\n<p>  \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u044f\u0437\u044b\u043a\u0438.<\/p>\n<h3>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u0434<\/h3>\n<p>  \u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0444\u0430\u0439\u043b App.js \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442:<\/p>\n<pre><code class=\"javascript\">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\";<\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">const translationGetters = {   \/\/ lazy requires (metro bundler does not support symlinks)   ar: () =&gt; require(\".\/src\/translations\/ar.json\"),   en: () =&gt; require(\".\/src\/translations\/en.json\"),   fr: () =&gt; require(\".\/src\/translations\/fr.json\") };   const translate = memoize(   (key, config) =&gt; i18n.t(key, config),   (key, config) =&gt; (config ? key + JSON.stringify(config) : key) );   const setI18nConfig = () =&gt; {   \/\/ 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; };<\/code><\/pre>\n<p>  \u041d\u0443 \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043b\u0430\u0441\u0441\u0430 App:<\/p>\n<pre><code class=\"javascript\">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 = () =&gt; {     setI18nConfig();     this.forceUpdate();   };     render() {     return (       &lt;SafeAreaView style={styles.safeArea}&gt;         &lt;Text style={styles.value}&gt;{translate(\"hello\")}&lt;\/Text&gt;       &lt;\/SafeAreaView&gt;     );   } }   const styles = StyleSheet.create({   safeArea: {     backgroundColor: \"white\",     flex: 1,     alignItems: \"center\",     justifyContent: \"center\"   },   value: {     fontSize: 18   } });<\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u2014 setI18nConfig() \u2014 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e.<\/p>\n<p>  \u0417\u0430\u0442\u0435\u043c \u0432 componentDidMount() \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c handleLocalizationChange() \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442.<\/p>\n<p>  \u041c\u0435\u0442\u043e\u0434 handleLocalizationChange() \u0430\u043a\u0442\u0438\u0432\u0438\u0437\u0438\u0440\u0443\u0435\u0442 setI18nConfig() \u0438 forceUpdate(). \u042d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u043d\u0430 Android, \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u043c\u0438.<\/p>\n<p>  \u0417\u0430\u0442\u0435\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u0430 componentWillUnmount().<\/p>\n<p>  \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432 render() \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f hello \u043f\u0443\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f translate() \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u043d\u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 key. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u00ab\u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c\u00bb, \u043a\u0430\u043a\u043e\u0439 \u044f\u0437\u044b\u043a \u043d\u0443\u0436\u0435\u043d, \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u043d\u0435\u043c.<\/p>\n<h3>\u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f <\/h3>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434.<\/p>\n<p>  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0438\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0435 \u0438\u043b\u0438 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0435, \u043d\u0430\u0431\u0438\u0440\u0430\u044f<\/p>\n<p>  <i>$ react-native run-ios<br \/>  $ react-native run-android<br \/>   <\/i> <br \/>  \u0412\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/93c\/bdd\/af4\/93cbddaf4e8c5d7858ee28226eae2a3b.png\"><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u043c\u0435\u043d\u0438\u0442\u044c \u044f\u0437\u044b\u043a \u043d\u0430 \u0444\u0440\u0430\u043d\u0446\u0443\u0437\u0441\u043a\u0438\u0439, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0432 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/65d\/c0b\/059\/65dc0b0595cbfda55b1c0e9613025a92.png\"><\/p>\n<p>  \u0421 \u0430\u0440\u0430\u0431\u0441\u043a\u0438\u043c \u044f\u0437\u044b\u043a\u043e\u043c \u043f\u0440\u043e\u0434\u0435\u043b\u044b\u0432\u0430\u0435\u043c \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0440\u0430\u0437\u043d\u0438\u0446\u044b \u043d\u0435\u0442.<\/p>\n<p>  \u041f\u043e\u043a\u0430 \u0432\u0441\u0435 \u0438\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e.<\/p>\n<p>  \u041d\u043e \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u044f\u0437\u044b\u043a, \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438?<\/p>\n<p>  \u041e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0437\u0430\u0434\u0430\u0447\u0430 findBestLanguage \u2014 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437 \u0432\u0441\u0435\u0445 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u044f\u0437\u044b\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<p>  \u0420\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0435 iOS \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u044f\u0437\u044b\u043a\u043e\u0432.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/c41\/949\/da6\/c41949da6517781477d3d6fb96cab82c.png\"><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c, findBestAvailableLanguage \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 undefined, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u0442 \u044f\u0437\u044b\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<h3>\u0411\u043e\u043d\u0443\u0441<\/h3>\n<p>  \u0423 react-native-localize \u0435\u0441\u0442\u044c API, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0431\u043e\u043b\u044c\u0448\u043e\u043c\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443, <a href=\"https:\/\/github.com\/react-native-community\/react-native-localize#api\">\u0441\u0442\u043e\u0438\u0442 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439<\/a>.<\/p>\n<h3>\u0412\u044b\u0432\u043e\u0434\u044b<\/h3>\n<p>  \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0443\u043b\u044c\u0442\u0438\u044f\u0437\u044b\u0447\u043d\u044b\u043c \u0431\u0435\u0437 \u043e\u0441\u043e\u0431\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. React-native-localize \u2014 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u043a\u0440\u0443\u0433 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <a href=\"https:\/\/github.com\/vikrantnegi\/react-native-multi-language-app\">\u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<blockquote><p><b>Skillbox \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442:<\/b><\/p>\n<ul>\n<li>\u0414\u0432\u0443\u0445\u043b\u0435\u0442\u043d\u0438\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u0443\u0440\u0441 <a href=\"https:\/\/iamwebdev.skillbox.ru\/?utm_source=skillbox.media&amp;utm_medium=habr.com&amp;utm_campaign=WEBDEVPRO&amp;utm_content=articles&amp;utm_term=reactnative\">\u00ab\u042f \u2014 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a PRO\u00bb<\/a>.<\/li>\n<li>\u041e\u043d\u043b\u0430\u0439\u043d-\u043a\u0443\u0440\u0441 <a href=\"https:\/\/skillbox.ru\/c-sharp\/?utm_source=skillbox.media&amp;utm_medium=habr.com&amp;utm_campaign=CSHDEV&amp;utm_content=articles&amp;utm_term=reactnative\">\u00ab\u0421#-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441 \u043d\u0443\u043b\u044f\u00bb<\/a>.<\/li>\n<li>\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0433\u043e\u0434\u043e\u0432\u043e\u0439 \u043a\u0443\u0440\u0441 <a href=\"https:\/\/skillbox.ru\/php\/?utm_source=skillbox.media&amp;utm_medium=habr.com&amp;utm_campaign=PHPDEV&amp;utm_content=articles&amp;utm_term=reactnative\">\u00abPHP-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441 0 \u0434\u043e PRO\u00bb<\/a>.  <\/li>\n<\/ul>\n<\/blockquote>\n<\/div>\n<p>               <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d()}}}t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>     <br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/skillbox\/blog\/459741\/\"> https:\/\/habr.com\/ru\/company\/skillbox\/blog\/459741\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d65\/2b6\/19e\/d652b619e61aaf2d1216f0f94ab533b2.jpg\"><\/p>\n<p>  \u041b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0446\u0438\u0438 \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u0430 \u0434\u043b\u044f \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439, \u043e\u0441\u0432\u0430\u0438\u0432\u0430\u044e\u0449\u0438\u0445 \u043d\u043e\u0432\u044b\u0435 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0441\u0442\u0440\u0430\u043d\u044b \u0438 \u0440\u0435\u0433\u0438\u043e\u043d\u044b. \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0443\u0436\u043d\u0430 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c. \u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u0443\u044e \u044d\u043a\u0441\u043f\u0430\u043d\u0441\u0438\u044e, \u0432\u0430\u0436\u043d\u043e \u0434\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u044b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u043d\u0430 \u0440\u043e\u0434\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 React Native, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/github.com\/react-native-community\/react-native-localize\">react-native-localize<\/a>.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-291982","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/291982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=291982"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/291982\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=291982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=291982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=291982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}