غیر واضح ایپاس میں ایک ملتانی زبان کی حمایت کا نظام تشکیل دینا

مرکزی لائبریریوں کو نصب کرنا

ضروری پیکجوں کی تنصیب کے لیے شروع کریں:

npm install react-i18next i18next i18next-http-backend react-native-localize

[1] Ai18 q-Browser- زبان میں امتیازی صلاحیت کے لیے ] خودکار زبان کے لیے استعمال ہونے والی ترجیحات پر مبنی معلومات کے لیے آپ کو دیکھیے کہ آپ کو وفاقی میکانیات کو عملے میں لانے کے لیے رموزی ہندسہ (Auto-link in RN 0.60+) سے ملانا ہوگا ۔

آئین کو مزید فروغ دینا

کوئي فا ئل بنا ئيں، مثلاً :

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';
import en from './translations/en.json';
import es from './translations/es.json';
import fr from './translations/fr.json';

const resources = { en: { translation: en }, es: { translation: es }, fr: { translation: fr } };

const detectionOptions = {
 order: ['localStorage', 'navigator'],
 caches: ['localStorage'],
};

i18n
 .use(initReactI18next)
 .use(require('i18next-browser-languagedetector').default) // for RN, you may replace with custom detector
 .init({
 resources,
 fallbackLng: 'en',
 interpolation: { escapeValue: false },
 detection: {
 // For RN, we'll override detection manually (see below)
 },
 });

// Detect device language at startup
const detectLanguage = () => {
 const locales = RNLocalize.getLocales();
 if (locales && locales.length > 0) {
 const langCode = locales[0].languageCode;
 const supportedLanguages = Object.keys(resources);
 const lang = supportedLanguages.includes(langCode) ? langCode : i18n.options.fallbackLng[0];
 i18n.changeLanguage(lang);
 }
};
detectLanguage();

// Listen to app focus for locale changes
export default i18n;

استعمال کرتے ہوئے آپ کی app کو یقینی بنایا جاتا ہے ڈیوائس کی علاقائی ترتیبات کو یقینی بنایا جاتا ہے ایک بار جاری اور ابتدائی زبان کو مرتب کرتا ہے. (اگر صارف اپنی اوزار تبدیل کرتا ہے تو) آپ [[FLT5] تبدیل کر سکتے ہیں۔

{
 "common": {
 "welcome": "Welcome",
 "greeting": "Hello, {{name}}!"
 },
 "home": {
 "title": "Home Screen",
 "description": "This is a multi-language React Native app."
 },
 "errors": {
 "network": "Network error. Please try again."
 }
}

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
 const { t, i18n } = useTranslation('common');
 return (
 
 {t('welcome')}
 {t('greeting', { name: 'John' })}
  i18n.changeLanguage('es')}>
 Switch to Spanish
 
 
 );
};

import { Trans } from 'react-i18next';
// In translations: "welcome_html": "Welcome, {user}!"

 Welcome, {user}!

{
 "item": "{{count}} item",
 "item_plural": "{{count}} items",
 "item_other": "{{count}} items"
}

import AsyncStorage from '@react-native-async-storage/async-storage';

const languageDetector = {
 type: 'languageDetector',
 async: true,
 detect: async (callback) => {
 const storedLang = await AsyncStorage.getItem('user-language');
 callback(storedLang || 'en');
 },
 init: () => {},
 cacheUserLanguage: async (lng) => {
 await AsyncStorage.setItem('user-language', lng);
 },
};

i18n.use(initReactI18next).use(languageDetector).init({
 fallbackLng: 'en',
 resources,
 interpolation: { escapeValue: false },
});

import { I18nManager } from 'react-native';

const changeLanguage = async (lng) => {
 await i18n.changeLanguage(lng);
 const isRTL = i18n.dir(lng) === 'rtl';
 I18nManager.forceRTL(isRTL);
 // On Android, you may need to restart the app for full RTL effect
};

import HttpBackend from 'i18next-http-backend';

i18n.use(HttpBackend).init({
 backend: {
 loadPath: 'https://your-api.com/locales/{{lng}}/{{ns}}.json',
 },
 fallbackLng: 'en',
 ns: ['common', 'home'],
 defaultNS: 'common',
});