כתיבת אפליקציה רב לשונית ב-React Native

לוקליזציה של מוצרים חשובה מאוד עבור חברות בינלאומיות הבודקות מדינות ואזורים חדשים. באופן דומה, נדרשת לוקליזציה עבור יישומים ניידים. אם מפתח מתחיל בהתרחבות בינלאומית, חשוב לתת למשתמשים ממדינה אחרת את האפשרות לעבוד עם הממשק בשפת האם שלהם. במאמר זה, ניצור יישום React Native באמצעות החבילה להגיב-יליד-לוקליז.

Skillbox ממליצה: קורס חינוכי מקוון "מקצועי מפתח ג'אווה".
אנו מזכירים: לכל קוראי Habr - הנחה של 10 רובל בעת הרשמה לכל קורס Skillbox באמצעות קוד ההטבה של Habr.

כלים ומיומנויות

כדי להבין את המאמר הזה, אתה צריך מיומנויות בסיסיות בעבודה עם React Native. כדי להכיר את ההגדרות של המכונה העובדת, אתה יכול השתמש בהוראות הרשמיות.

נצטרך את הגרסאות האלה של כלי תוכנה:

• צומת 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
$ cd multiLanguage

הוספת הספריות הדרושות

הצעד הראשון הוא התקנת react-native-localize על ידי הקלדת הדברים הבאים:
$ yarn הוסף react-native-localize

אם מתרחשות בעיות במהלך תהליך ההתקנה, כדאי לקרוא את מדריך ההתקנה.

ספריית react-native-localize מעניקה למפתח גישה לתכונות רב לשוניות. אבל היא צריכה עוד ספרייה אחת - i18n.

מאמר זה מתאר את השימוש I18n.js על מנת לספק תרגום ל-JavaScript.

$ yarn add i18n-js

ובכן, מכיוון ש-i18n-js אינו מספק אחסון במטמון או שינון, אני מציע להשתמש ב-lodash.memoize עבור זה:

$ yarn הוסף lodash.memoize

עבודה עם תרגומים

כדי שהאפליקציה תוכל לעבוד עם שפות אחרות, תחילה עליך ליצור ספריית תרגומים בתוך src, ולאחר מכן שלושה קבצי JSON לכל שפה.

1. en.json לאנגלית;

2. fr.json לצרפתית;

3. ar.json לערבית.

קבצים אלה מכילים אובייקטי JSON עם מפתחות וערכים. המפתח יהיה זהה עבור כל שפה. הוא משמש את האפליקציה להצגת מידע טקסט.

ערך הוא הטקסט שצריך להראות למשתמש.

אנגלית:

{"hello": "שלום עולם!"}

Французский

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

Арабский

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

אתה יכול להוסיף שפות אחרות באותו אופן.

קוד ראשי

בשלב זה, עליך לפתוח את קובץ 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(). זה הכרחי עבור מכשירי אנדרואיד שכן יש להציג את הרכיב כדי שהשינויים יהיו מורגשים.

לאחר מכן עליך להסיר את ההאזנה מהשיטה componentWillUnmount()‎.

לבסוף, render() מחזיר hello באמצעות translate() והוספת פרמטר מפתח אליו. לאחר השלבים הללו, האפליקציה תוכל "להבין" איזו שפה נדרשת ולהציג בה הודעות.

השקת יישומים

עכשיו זה הזמן לבדוק איך התרגום עובד.

ראשית, אנו מפעילים את האפליקציה בסימולטור או באמולטור על ידי הקלדה

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

זה ייראה בערך כך:

כעת תוכל לנסות לשנות את השפה לצרפתית על ידי הפעלת האפליקציה.

אנחנו עושים את אותו הדבר עם ערבית, אין הבדל.

בינתיים הכל טוב.

אבל מה קורה אם תבחר בשפה אקראית שאין לה תרגום באפליקציה?

מסתבר שהמשימה של findBestLanguage היא לספק את התרגום האופטימלי מכל התרגום הזמינים. כתוצאה מכך, תוצג שפת ברירת המחדל.

אנחנו מדברים על הגדרות הטלפון. לדוגמה, באמולטור iOS ניתן לראות את סדר השפות.

אם השפה שנבחרה אינה השפה המועדפת, findBestAvailableLanguage מחזירה לא מוגדרת כך ששפת ברירת המחדל תוצג.

בונוס

ל-react-native-localize יש API המספק גישה למספר רב של רכיבי שפה. לפני שתתחיל לעבוד, שווה לבדוק את התיעוד.

ממצאים

ניתן להפוך את האפליקציה לרב לשונית ללא בעיות. React-native-localize היא אפשרות מצוינת המאפשרת לך להרחיב את בסיס המשתמשים של האפליקציה שלך.

קוד המקור של הפרויקט ממוקם כאן.

Skillbox ממליצה:

• קורס מעשי שנתיים "אני מפתח אתרים PRO".
• קורס מקוון "מפתח C# מאפס".
• קורס מעשי בן שנה "מפתח PHP מ-0 ל-PRO".

מקור: www.habr.com