React i18next e modo corretto di cambiare lingua

Sto sviluppando un'applicazione multilingua utilizzando React, i18next e i18next-browser-languagedetector.React i18next e modo corretto di cambiare lingua

inizializzo i18next seguente modo:

i18n 
    .use(LanguageDetector) 
    .init({ 
    lng: localStorage.getItem(I18N_LANGUAGE) || "pt", 
    fallbackLng: "pt", 
    resources: { 
     en: stringsEn, 
     pt: stringsPt 
    }, 
    detection: { 
     order: ["localStorage", "navigator"], 
     lookupQuerystring: "lng", 
     lookupLocalStorage: I18N_LANGUAGE, 
     caches: ["localStorage"] 
    } 
    }); 

export default i18n;

E mi hanno messo in atto una selezione della lingua che cambia solo il valore nel localStorage a ciò che l'utente ha scelto.

È questo il modo corretto di farlo?

Chiedo perché anche se funziona, mi sento di "barare" impostando localStorage.getItem(I18N_LANGUAGE) || "pt" e che non sto usando il rilevamento della lingua come dovrei.

fonte

2016-03-01 pteixeira

Sto provando a risolvere lo stesso problema e ho trovato due soluzioni. Primo: puoi memorizzare le impostazioni locali come parametro url (: locale \ you_url) come [this] (https://alicoding.com/language-code-url-in-react-intl/). Il secondo è la tua variante - store locale in localStorage o cookies. Mi piacerebbe fare lo stesso come te, ma i18next non trova le chiavi. Puoi scrivere un esempio o condividere il tuo codice, per favore? –

Abbiamo scelto di impostare la locale in localStorage. Cosa intendi con 'i18next' non trova le chiavi? A proposito, sto usando 'react-i18next'. Controllare questo: https://gist.github.com/pteixeira/4a75160ca15e3edf6975 ho anche una componente di selezione della lingua che imposta la voce localStorage con il valore della lingua quando si inizializza, il controllo per un valore di default o quello che l'utente sceglie. – pteixeira

Grazie, è davvero utile per me. Un'altra domanda: c'è modo di cambiare lingua in runtime? –

Secondo il documentation, non dovrebbe essere necessario specificare la lingua da soli:

import i18next from 'i18next'; 
import LngDetector from 'i18next-browser-languagedetector'; 

i18next 
    .use(LngDetector) 
    .init({ 
    detection: options 
    });

E secondo this piece of source in i18next, utilizza infatti le capacità di rilevamento del plugin:

if (!lng && this.services.languageDetector) lng = this.services.languageDetector.detect();

È questo il modo corretto di farlo?

Quindi, no, non lo è. Lascia che il plugin faccia il suo lavoro. :)

fonte

2016-05-19 15:45:21 firstdoit

Risposta corretta ... se si imposta la lingua su init, il rilevatore di lingua non farà il proprio lavoro in fase di rilevamento. Può essere contrassegnato come risposta corretta. Best Jan (aka jamuhl: maintainer di i18next) – jamuhl

Ho dato un'occhiata al codice e l'ho refactored per usare correttamente il plugin. Contrassegnato anche la risposta come accettata. – pteixeira

@firstdoit:

Buona risposta per quanto riguarda il rilevamento automatico della lingua del browser. Tuttavia, non pensate che, è un approccio migliore di avere la configurazione automatica e manuale avvalendosi di un utente.

Ad esempio, se uno ha un browser impostato in inglese, questo sarà ok per l'approccio automatico che stai suggerendo in base alla documentazione. Se un utente cambia la lingua di una pagina dall'inglese al francese, ciò non influisce sulla lingua del browser, quindi mantiene il sito solo in inglese perché le configurazioni sono impostate per rilevare automaticamente la lingua del browser.

io, a sua volta, darà la priorità alla lingua pagina corrente:

In entrambi passati attraverso parametri (/george.php?lang=fr o /fr_FR/george.php)

Questo si trasformerà essere passato come puntelli per il mio codice come prority da seguire

var lang = this.props.lang || this.services.languageDetector.detect() || "En";

Qual è la tua opinione?

fonte

2016-08-11 12:51:35 Joe

Penso che tu sia molto vicino. È sufficiente impostare i18n inizialmente con la lingua di fallback. E poi, dopo aver caricato le informazioni sulla lingua salvate per localstorage o localforage o qualsiasi altra memoria, chiama i18nInstance.changeLanguage(lng).

fonte

2016-09-21 04:46:54 sean

React i18next e modo corretto di cambiare lingua

risposta

Problemi correlati