web-dev-qa-db-fra.com

Changer la langue de l'ensemble React Native App

J'ai une application native React dans laquelle la langue par défaut est l'anglais. J'ai une page de profil dans laquelle l'utilisateur peut changer la langue de l'anglais vers une autre langue. Et lorsque l'utilisateur enregistre le changement de langue, la langue, y compris le titre, les noms de navigation dans les tiroirs, doivent être remplacés par la langue choisie par l'utilisateur. Comment pouvons-nous implémenter cette fonctionnalité dans React Native?

androidiosreact-native
12
vishnumm93

Vous pouvez utiliser ce package: https://github.com/AlexanderZaytsev/react-native-i18n

Une fois installé, il vous suffit de définir vos fichiers de paramètres régionaux, par exemple:

// src/i18n/locales/en.js
export default {  
  greeting: 'Hi!'
};

// src/i18n/locales/es.js
export default {  
  greeting: 'Hola!'
};

// src/i18n/locales/jp.js
export default {  
  greeting: 'Konichiwa!'
};

Importez ensuite ces fichiers et configurez la configuration du support i18n comme ceci:

// src/i18n/index.js
import I18n from 'react-native-i18n';
import en from './locales/en';
import es from './locales/es'; 
import jp from './locales/jp';  

I18n.fallbacks = true;

I18n.translations = {
  en,
  es,
  jp,
};

export default I18n;

Et enfin, utilisez-le dans vos composants comme ceci:

import I18n from 'src/i18n';

class Demo extends React.Component {
  render () {
    return (
      <Text>{I18n.t('greeting')}</Text>
    )
  }
}

Par défaut, il utilisera les paramètres régionaux de l'appareil, mais si vous souhaitez remplacer cela. Par exemple, lorsque l'utilisateur possède un appareil avec des paramètres régionaux espagnols, mais souhaite utiliser le japonais, vous pouvez faire quelque chose comme ceci:

I18n.locale = 'jp';

Chaque fois que vous appelez I18n.t('greeting'), cela rendra Konichiwa!. À partir de maintenant, vous devrez toujours utiliser I18n.t Pour afficher n'importe quel texte dans votre application.

23
Crysfel

vous pouvez installer le package i18n à partir de ce lien: https://github.com/AlexanderZaytsev/react-native-i18n

Maintenant, dans chaque partie, vous devez apporter des modifications dans votre langue, il suffit d'importer I18n dans un fichier js:

import I18n from "react-native-i18n";

et utilisez le code du bas dans le bouton onpress

I18n.locale = "en"; // Language desired
0
Morteza Farhadi