ما یک برنامه چند زبانه در React Native می نویسیم

بومی سازی محصولات برای شرکت های بین المللی که کشورها و مناطق جدید را توسعه می دهند بسیار مهم است. به طور مشابه، محلی سازی برای برنامه های کاربردی تلفن همراه مورد نیاز است. اگر یک توسعه‌دهنده توسعه بین‌المللی را آغاز کند، مهم است که به کاربران کشوری دیگر این فرصت را بدهیم که با رابط به زبان مادری خود کار کنند. در این مقاله، با استفاده از بسته، یک برنامه React Native ایجاد می کنیم react-native-localize.

Skillbox توصیه می کند: دوره آموزشی آنلاین "توسعه دهنده حرفه ای جاوا".
یادآوری می کنیم: برای همه خوانندگان "Habr" - تخفیف 10 روبل هنگام ثبت نام در هر دوره Skillbox با استفاده از کد تبلیغاتی "Habr".

ابزار و مهارت

درک این مقاله به مهارت های اولیه React Native نیاز دارد. برای آشنایی با تنظیمات دستگاه کار می توانید از دستورالعمل های رسمی استفاده کنید.

ما به این نسخه از ابزارهای نرم افزاری نیاز داریم:

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

شروع کار

ما برنامه ای ایجاد خواهیم کرد که از انگلیسی، فرانسوی و عربی پشتیبانی می کند. ابتدا با استفاده از react-native-cli یک پروژه جدید ایجاد می کنیم. برای انجام این کار، در ترمینال باید این را تایپ کنید:

$ react-native init multilanguage
$ سی دی چند زبانه

افزودن کتابخانه های مورد نیاز

اولین مرحله نصب react-native-localize با تایپ کردن موارد زیر است:
$ yarn react-native-localize را اضافه کنید

اگر در مراحل نصب با مشکل مواجه شدید، راهنمای نصب را بررسی کنید.

کتابخانه react-native-localize به توسعه دهنده امکان دسترسی به ویژگی های چند زبانه را می دهد. اما او به کتابخانه دیگری نیاز دارد - i18n.

مقاله استفاده را شرح می دهد I18n.js به منظور ارائه ترجمه در جاوا اسکریپت.

i18n-js را اضافه کنید

خوب، از آنجایی که i18n-js ذخیره سازی یا حافظه گذاری را ارائه نمی دهد، پیشنهاد می کنم از lodash.memoize برای این کار استفاده کنید:

$ نخ اضافه lodash.memoize

کار با ترجمه

برای اینکه برنامه با زبان های دیگر کار کند، ابتدا باید یک فهرست ترجمه در داخل src ایجاد کنید، سپس سه فایل JSON برای هر یک از زبان ها ایجاد کنید.

1. en.json برای انگلیسی؛

2. fr.json برای فرانسوی;

3. ar.json برای عربی.

این فایل ها حاوی اشیاء JSON با کلیدها و مقادیر هستند. کلید برای هر زبان یکسان خواهد بود. توسط برنامه برای نمایش اطلاعات متنی استفاده می شود.

مقدار (مقدار) متنی است که باید به کاربر نشان داده شود.

انگلیسی:

{ "hello": "Hello World!"}

Французский

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

Арабский

{ «سلام»: «أهلاً بالعالم»}

زبان های دیگر را می توان به همین روش اضافه کرد.

کد اصلی

در این مرحله، باید فایل App.js را باز کنید و واردها را به آن اضافه کنید:

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

پس از آن، توابع و ثابت های کمکی اضافه می شوند که بعدا مفید خواهند بود.

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

خب، حالا بیایید یک جزء از کلاس 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
  }
});

اولین عنصر، setI18nConfig()، پیکربندی اولیه را تنظیم می کند.

سپس باید یک رویداد شنونده به componentDidMount() اضافه کنیم، این عنصر به به‌روزرسانی‌ها گوش می‌دهد و هنگامی که آنها رخ می‌دهند handleLocalizationChange را فرا می‌خواند.

متد handleLocalizationChange() setI18nConfig و forceUpdate() را فراخوانی می کند. این برای دستگاه‌های اندرویدی ضروری است، زیرا برای قابل مشاهده شدن تغییرات، مؤلفه باید رندر شود.

سپس باید شنونده را از متد ()componentWillUnmount حذف کنیم.

در نهایت، hello در render() با استفاده از translate() و افزودن یک پارامتر کلیدی به آن برگردانده می شود. پس از این مراحل، برنامه قادر خواهد بود "درک" زبان مورد نیاز و نشان دادن پیام ها در آن.

راه اندازی برنامه

اکنون زمان بررسی نحوه کار ترجمه است.

ابتدا اپلیکیشن را در شبیه ساز یا شبیه ساز با تایپ اجرا می کنیم

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

چیزی شبیه به این خواهد بود:

اکنون می توانید با راه اندازی برنامه سعی کنید زبان را به فرانسوی تغییر دهید.

با زبان عربی هم همین کار را می کنیم، فرقی نمی کند.

تا اینجا همه چیز خوب پیش می رود.

اما اگر زبان تصادفی را انتخاب کنید که ترجمه ای در برنامه ندارد، چه اتفاقی می افتد؟

به نظر می رسد که وظیفه findBestLanguage ارائه بهترین ترجمه ممکن در میان همه موجودات است. در نتیجه زبانی که به صورت پیش فرض تنظیم شده بود نمایش داده می شود.

این مربوط به تنظیمات گوشی است. بنابراین، برای مثال، در شبیه ساز iOS، می توانید ترتیب زبان ها را ببینید.

اگر زبان انتخابی زبان ترجیحی نیست، findBestAvailableLanguage تعریف نشده برمی‌گرداند تا زبان پیش‌فرض نشان داده شود.

جایزه

react-native-localize دارای یک API است که دسترسی به تعداد زیادی از عناصر زبان را فراهم می کند. قبل از شروع کار، ارزش خواندن اسناد را دارد.

یافته ها

برنامه را می توان بدون هیچ مشکلی چند زبانه کرد. React-native-localize یک گزینه عالی است که به شما امکان می دهد دامنه کاربران برنامه خود را گسترش دهید.

کد منبع پروژه اینجاست.

Skillbox توصیه می کند:

• دوره عملی دو ساله "من یک توسعه دهنده وب PRO هستم".
• دوره آنلاین "توسعه دهنده سی شارپ از ابتدا".
• دوره عملی سال "توسعه دهنده PHP از 0 تا PRO".

منبع: www.habr.com