راهنمای بومی سازی برنامه‌های React-Native

بومی سازی به معنای سازگاری برنامه (از نظر زبانی) برای متناسب کردن با کشور یا منطقه خاص کاربران است. پشتیبانی از چندین زبان (از جمله زبان‌ فارسی) ویژگی مهمی برای هر برنامه موفق موبایلی است، زیرا پایگاه کاربر را در برابر تعداد بیشتری از افراد قرار می‌دهد و همچنین تجربه کاربر را به میزان قابل توجهی بهبود می‌بخشد.

 بومی سازی در ری‌اکت نیتیو می‌تواند کمی مشکل باشد، به همین دلیل ما تصمیم به نوشتن این آموزش گرفتیم. بیایید ببینیم که چگونه می‌توان برنامه‌های ری‌اکت نیتیو را به صورت صحیح بومی سازی کرد.

نصب و راه‌اندازی

expo-localization یک کتابخانه Expo است که برای واکشی اطلاعات مربوط به مکان کاربر و بومی‌سازی برنامه استفاده می‌شود. این اطلاعات در مورد مکان کاربر، منطقه زمانی، ناحیه و کد ارز کاربر را ارائه می‌دهد که همه اینها به شما کمک می‌کنند تجربه کاربری برنامه خود را شخصی سازی کنید. بیایید این پکیج را نصب و اجرا کنیم:

expo install expo-localization

i18n-js برای دستیابی به بومی سازی در برنامه‌های موبایل ری‌اکت نیتیو و وبسایت مورد استفاده قرار می‌گیرد.

این یک کتابخانه کوچک برای ارائه ترجمه‌های Rails I18n در جاوااسکریپت است.

yarn add i18n-js

lodash.memoize کتابخانه دیگری است که برای کش کردن ترجمه‌ها به آن نیاز داریم. بیایید آن را هم نصب کنیم:

yarn add lodash.memoize

فایل‌های پیکربندی ترجمه خود را ایجاد کنید

فرض کنید می‌خواهیم در برنامه ری‌اکت نیتیو خود از 3 زبان پشتیبانی کنیم: فرانسه، انگلیسی و اسپانیایی. بیایید برای هر یک از آن‌ها یک فایل پیکربندی json اضافه کنیم، به شرح زیر:

fr.json

{
    "welcome": "Bienvenue dans le didacticiel de traduction"
}

en.json

//en.json
{
    "welcome": "Welcome to translation tutorial",
}

es.json

//es.json
{
    "welcome": "Bienvenida al tutorial de traducción",
}

بومی سازی React Native – جادوی کد

اکنون که فایل‌های پیکربندی آماده هستند و وابستگی‌های مورد نیاز را هم نصب کردیم، بیایید برای بومی سازی برنامه ری‌اکت نیتیو خود اجرای واقعی را انجام دهیم.

فایلی به نام IMLocalized.js ایجاد می‌کنیم و قطعه کد زیر را اضافه می‌کنیم. همانطور که احتمالا حدس زده‌اید، در Instamobile دقیقا از همان مکانیزم برای محلی سازی برنامه‌های ری‌اکت نیتیو خود استفاده می‌کنیم، مکانی که این قطعه کد را از آنجا گرفته‌ایم. به راحتی می‌توانید IML را به نام اصلی خود تغییر دهید، اما در این مقاله از همان نام استفاده می‌کنیم. (پیشوند IM مخفف Instamobile است)

import memoize from 'lodash.memoize'; // Use for caching/memoize for better performance
import i18n from 'i18n-js';
import * as Localization from 'expo-localization';
import { I18nManager } from 'react-native';

export const translationGetters = {
  'es-US': () => require('./es.json'),
  'en-US': () => require('./en.json'),
  'fr-FR': () => require('./fr.json'),
};

export const IMLocalized = memoize(
  (key, config) =>
    i18n.t(key, config).includes('missing') ? key : i18n.t(key, config),
  (key, config) => (config ? key + JSON.stringify(config) : key),
);

export const init = () => {
    
  let localeLanguageTag = Localization.locale;
  let isRTL = Localization.isRTL;

  IMLocalized.cache.clear();
  // update layout direction
  I18nManager.forceRTL(isRTL);
  // set i18n-js config
  i18n.translations = {
    [localeLanguageTag]: translationGetters[localeLanguageTag](),
  };
  i18n.locale = localeLanguageTag;
};

()init مکان کاربر را مشخص می‌کند و ()i18nIMLocalized کلیدهای مقادیر رشته ذخیره شده در فایل پیکربندی ما را می‌پذیرد و مقادیر آن‌ها را واکشی می‌کند و lodash.moMoize نیز کمک می‌کند تا مقدار بازیابی شده را ذخیره کنید.

برای تست برنامه بیایید یک رابط کاربری سفارشی ساده بسازیم تا کامپوننت قدرتمند محلی سازی را به نمایش بگذاریم.

import React from 'react';
import {IMLocalized, init} from './IMLocalized';
import { View, StyleSheet, Text } from 'react-native';

export function WelcomeScreen(params) {
    init();
    return(
        <View style={styles.container} >
            <Text style={styles.welcomeText} >
                {IMLocalized('welcome')}
            </Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    },
    welcomeText: {
        fontSize: 16,
    }
})

به نحوه استفاده از IMLocalized توجه کنید. ما به جای قرار دادن یک رشته ساده مثل "Welcome" به کامپوننت Text، آن را در یک فراخوانی محلی IML می‌گذاریم. این قسمت اصلی چگونگی دستیابی به بومی سازی ری‌اکت نیتیو برای پشتیبانی از چند زبان، از جمله RTL است. این برنامه به جای اینکه رشته انگلیسی کد شده را نمایش دهد، رشته "Welcome" را به زبان صحیح (براساس تنظیمات دستگاه کاربر) به طرز شگفت انگیزی نشان می‌دهد.

اجرای برنامه شما باید به این شکل باشد:

انگلیسی

تنظیمات دستگاه خود را به زبان اسپانیایی تغییر دهید و برنامه را دوباره باز کنید. ملاحظه می‌کنید که این رشته اکنون به اسپانیایی است:

اسپانیایی

تنظیمات دستگاه را بار دیگر به فرانسوی تغییر دهید:

فرانسوی

جمع‌بندی

بومی سازی برنامه برای دستیابی به طیف وسیع‌تری از مشتریان در مناطق مختلف جهان بسیار مهم است. همانطور که در بالا مشاهده کردید، بومی سازی برنامه فرایند هولناکی نیست.

با استفاده از متد IMLocalized می‌توانید تمام رشته‌های موجود در برنامه را با قرار دادن آن‌ها در یک فراخوانی IMLocalized ترجمه کنید. همچنین می‌توانید از الگوی مشابهی در تمام زبان‌های برنامه نویسی تلفن همراه دیگر مانند سویفت، فلاتر یا کاتلین پیروی کنید.

اضافه کردن پشتیبانی برای چندین زبان (از جمله RTL) با ایجاد تنظیمات زیرساخت بسیار ساده است. توجه داشته باشید که قرار دادن رشته‌های کد شده در یک متد ترجمه کافی است.

اگر هرگونه سوال یا نظری دارید، در بخش زیر با ما در میان بگذارید.

منبع