Unterstützung mehrerer Sprachen in React Native: Die Internationalisierung der React Native-App hilft uns, diejenigen Benutzer anzusprechen, die entweder kein Englisch sprechen oder die App in ihrer Landessprache lieber verwenden. Wir können den Benutzern Optionen zur Auswahl aus mehreren Sprachen geben, die wir in unserer App anbieten werden.

Für diese Art von Situation müssen wir die Unterstützung mehrerer Sprachen in unserer App implementieren. Hier kommen i18next und React-i18next ins Spiel. Diese Bibliothek erleichtert die Verwaltung von Übersetzungen und bietet viele nützliche Funktionen.

Sich nähern: 

  • Erstellen eines neuen React Native - Projekts und Installieren der i18next- und React -i18next- Abhängigkeiten.
  • Erstellen einer JSON-Datei für jede Sprache.
  • Konfiguration von i18next in i18n.js .
  • Initialisieren von i18next durch Importieren in App.js .
  • Importieren von Sprachfunktionen in App.js und Ändern der Sprache.

Beginnen wir nun mit der Umsetzung.

Schritt 1: Erstellen Sie ein neues React Native Project, indem Sie den Befehl ausführen

npx react-native init languageDemo

Schritt 2: Gehen Sie nun in Ihren Projektordner bzw. Sprachdemo.

cd languageDemo

Schritt 3: Installieren   Sie die Bibliotheken i18next undreakt - i18next .

npm install i18next --save
npm i react-i18next

Projektstruktur: Sie sieht wie folgt aus.

Schritt 4Projektstruktur

 

Schritt 4: Erstellen von JSON-Dateien. Die JSON-Datei enthält die Übersetzung für jeden Text in unserer App, den wir anzeigen möchten. Die Datei ist im JSON-Format, sodass jeder Text einen Schlüssel hat.

Der Schlüssel ist für jeden unterschiedlichen Text einzigartig, aber für denselben Text in verschiedenen Sprachen gleich.

1. en.json: enthält Übersetzungen für Englisch .

{
    "translation": {
      "hello":"Hello",
      "this line is translated":"This line is translated"
    }
  }

2. hi.json: Enthält Übersetzungen für Hindi .

{
    "translation": {
      "hello":"नमस्ते",
      "this line is translated":"यह पंक्ति अनुवादित है"
    }
  }

Schritt 5: Konfiguration von i18next (i18n.js).  Wir werden i18n aus ‚i18next‘ und initReactI18next aus ‚react-i18next‘ importieren . 

Dann importieren wir unsere JSON-Dateien ( en.json und hi.json ).

In i18n.use(initReactI18next) übergeben wir die i18n-Instanz an respond-i18next , wodurch sie für alle Komponenten über die Kontext-API verfügbar wird.

Die Funktion init() nimmt ein Objekt von {lng , fallbacklng, resources} als Parameter.

lng - default language
fallbackLng - Fallback language in case key is not found for any translation.
resources - JSON file for various languages.

Dateiname: i18n.js

Javascript

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import en from './en.json';
import hi from './hi.json';
  
i18n.use(initReactI18next).init({
  lng: 'en',
  fallbackLng: 'en',
  resources: {
    en: en,
    hi: hi,
  },
  interpolation: {
    escapeValue: false // react already safes from xss
  }
});
  
export default i18n;

Schritt 6: Wir werden jetzt die i18n.js in unsere App.js -Datei importieren, die i18next initialisiert . Wir werden dann useTranslation Hook aus require-i18next importieren , was uns t und i18n gibt .

t - function which accepts key as parameter and returns the 
    appropriate text based on current language selected.
i18n - object containing function like changeLanguage  
    and other useful values.

In unserem Bildschirm haben wir zwei Schaltflächen zum Ändern der Sprache. Es gibt einen Text, der entsprechend der aktuell eingestellten Sprache geändert wird, wenn wir eine der beiden Tasten drücken. Um die Sprache zu ändern, verwenden wir die   changeLanguage- Funktion, die den Namen der Sprachressource als Parameter und eine Callback-Funktion akzeptiert, die nach der Sprachänderung ausgeführt wird.

We can check current language by doing console.log(i18n.language)

App.js

import React,{useState} from 'react';
import './i18n/i18n';
import {View, Text,Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
  
const App = () => {
    
  const {t, i18n} = useTranslation();
  
  const [currentLanguage,setLanguage] =useState('en');
  
  const changeLanguage = value => {
    i18n
      .changeLanguage(value)
      .then(() => setLanguage(value))
      .catch(err => console.log(err));
  };
  
  return (
   <View
        style={{
          flex: 1,
          backgroundColor: 'white',
          alignItems: 'center',
          justifyContent: 'space-evenly',
        }}>
        <Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>
          {t('hello')}{' '}
        </Text>
        <Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>
          {t('this line is translated')}
        </Text>
        <Pressable
          onPress={() => changeLanguage('en')}
          style={{
            backgroundColor:
              currentLanguage === 'en' ? '#33A850' : '#d3d3d3',
            padding: 20,
          }}>
          <Text>Select English</Text>
        </Pressable>
        <Pressable
          onPress={() => changeLanguage('hi')}
          style={{
            backgroundColor:
              currentLanguage === 'hi' ? '#33A850' : '#d3d3d3',
            padding: 20,
          }}>
          <Text>हिंदी का चयन करें</Text>
        </Pressable>
      </View>
  );
};
  
export default App;

Schritt zum Ausführen der Anwendung: Starten Sie die Anwendung mit dem folgenden Befehl: 

npx react-native run-android

Ausgabe:

Ausgabe

Referenz: https://react.i18next.com/guides/quick-start