نكتب تطبيقًا متعدد اللغات على React Native

يعد توطين المنتجات أمرًا مهمًا جدًا للشركات الدولية التي تعمل على تطوير دول ومناطق جديدة. وبالمثل ، فإن التعريب مطلوب لتطبيقات الهاتف المحمول. إذا بدأ المطور في التوسع الدولي ، فمن المهم منح المستخدمين من دولة أخرى الفرصة للعمل مع الواجهة بلغتهم الأم. في هذه المقالة ، سننشئ تطبيق React Native باستخدام الحزمة رد فعل - أصلية - توطين.

يوصي Skillbox بما يلي: دورة تعليمية عبر الإنترنت "مهنة مطور جافا".
نذكر: لجميع قراء "Habr" - خصم 10 روبل عند التسجيل في أي دورة Skillbox باستخدام رمز "Habr" الترويجي.

الأدوات والمهارات

يتطلب فهم هذه المقالة مهارات أساسية في React Native. للتعرف على إعدادات آلة العمل ، يمكنك ذلك استخدم التعليمات الرسمية.

نحتاج إلى هذه الإصدارات من أدوات البرمجيات:

• العقدة v10.15.0
• نانومتر 6.4.1
• غزل 1.16.0
• تفاعل أصلي 0.59.9
• تفاعل - أصلي - توطين 1.1.3
• i18n-js 3.3.0

الشروع في العمل

سننشئ تطبيقًا يدعم اللغة الإنجليزية والفرنسية والعربية. أولاً نقوم بإنشاء مشروع جديد باستخدام رد فعل أصلي cli. للقيام بذلك ، في الجهاز ، تحتاج إلى كتابة هذا:

رد فعل - أصلي - init متعدد اللغات
$ cd متعدد اللغات

اضافة المكتبات المطلوبة

الخطوة الأولى هي تثبيت رد فعل أصلي وتعريب عن طريق كتابة ما يلي:
$ yarn إضافة رد فعل-أصلية-توطين

إذا واجهت مشاكل أثناء عملية التثبيت ، تحقق من دليل التثبيت.

تتيح مكتبة التعريب المتفاعلة الأصلية للمطور الوصول إلى ميزات متعددة اللغات. لكنها بحاجة إلى مكتبة أخرى - i18n.

توضح المقالة الاستخدام I18n.js من أجل توفير الترجمة في JavaScript.

إضافة الغزل $ i18n-js

حسنًا ، نظرًا لأن i18n-js لا يوفر التخزين المؤقت أو الحفظ ، أقترح استخدام Lodash.memoize لهذا:

غزل $ إضافة لوداش. ميموز

العمل مع الترجمات

لكي يعمل التطبيق مع لغات أخرى ، تحتاج أولاً إلى إنشاء دليل ترجمات داخل src ، ثم ثلاثة ملفات JSON لكل لغة.

1. en.json للغة الإنجليزية ؛

2. fr.json للفرنسية.

3. ar.json للغة العربية.

تحتوي هذه الملفات على كائنات JSON ذات مفاتيح وقيم. سيكون المفتاح هو نفسه لكل لغة. يتم استخدامه من قبل التطبيق لعرض المعلومات النصية.

القيمة (القيمة) هي النص الذي يجب أن يظهر للمستخدم.

الإنجليزية:

{"hello": "Hello World!"}

Французский

{"مرحبًا": "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;
};

حسنًا ، لنقم الآن بإنشاء مكون من فئة التطبيق:

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 (). يعد هذا ضروريًا لأجهزة Android ، حيث يجب تقديم المكون حتى تصبح التغييرات مرئية.

ثم نحتاج إلى إزالة المستمع من طريقة componentWillUnmount ().

أخيرًا ، يتم إرجاع hello في العرض () باستخدام translate () وإضافة معلمة مفتاح إليها. بعد هذه الخطوات ، سيتمكن التطبيق من "فهم" اللغة المطلوبة وإظهار الرسائل بها.

إطلاق التطبيق

حان الوقت الآن للتحقق من كيفية عمل الترجمة.

أولاً نقوم بتشغيل التطبيق في المحاكي أو المحاكي عن طريق الكتابة

رد فعل أصلي تشغيل iOS
رد فعل - أصلي - تشغيل أندرويد

سيبدو شيئا من هذا القبيل:

يمكنك الآن محاولة تغيير اللغة إلى الفرنسية من خلال تشغيل التطبيق.

نحن نفعل نفس الشيء مع اللغة العربية ، لا فرق.

حتى الآن كل شيء يسير على ما يرام.

ولكن ماذا يحدث إذا اخترت لغة عشوائية لا تحتوي على ترجمة في التطبيق؟

اتضح أن مهمة findBestLanguage هي تقديم أفضل ترجمة ممكنة من بين كل ما هو متاح. نتيجة لذلك ، سيتم عرض اللغة التي تم تعيينها افتراضيًا.

يتعلق الأمر بإعدادات الهاتف. لذلك ، على سبيل المثال ، في محاكي iOS ، يمكنك رؤية ترتيب اللغات.

إذا لم تكن اللغة المحددة هي اللغة المفضلة ، فسيقوم findBestAvailableLanguage بإرجاع كلمة غير محددة بحيث يتم عرض اللغة الافتراضية.

علاوة

يحتوي رد الفعل-الأصلي-التعريب على واجهة برمجة تطبيقات توفر الوصول إلى عدد كبير من عناصر اللغة. قبل بدء العمل ، يجدر قراءة الوثائق.

النتائج

يمكن جعل التطبيق متعدد اللغات دون أي مشاكل. يُعد React-native-localize خيارًا رائعًا يسمح لك بتوسيع نطاق مستخدمي تطبيقك.

كود مصدر المشروع هنا.

يوصي Skillbox بما يلي:

• دورة عملية لمدة عامين "أنا مطور ويب للمحترفين".
• دورة على شبكة الإنترنت "C # مطور من البداية".
• دورة سنة عملية "مطور PHP من 0 إلى PRO".

المصدر: www.habr.com