更新应用程序 React Natice 的所有屏幕中的变量

Question

我的应用程序有法语和英语版本。我希望用户能够更改任何页面上的语言，并且当他们导航到任何其他屏幕时，我希望反映更改。

例如，我有 A.js

const A = (props) => {
  const [language, setLanguage] = useState('')
  return (
   <View style ={styles.container}>
            <Button onPress ={()=>setLanguage('french')}>{language==="french" ? changer la langue : change the language}
            </Button>
        </View>  
  )
}

Now when I go to any screen after pressing the button I want the content to be rendered in French and if I change the language in another screen I want changer la langue to be rendered in this screen

内存泄漏

const [language, setLanguage] = useState('') 
    const [visible, setVisible] = useState(false)
    const {t} = useTranslation();    
    const fetchLanguage =  async () =>{
        try{
            const currentLanguage = await AsyncStorage.getItem('language')
            if (currentLanguage === null ){
                setVisible(true)
            }
            else{
                setLanguage (currentLanguage)
                i18n.changeLanguage(currentLanguage)
            }
        }catch (e){
            console.log(e)
        }
       
    }
    useEffect (()=>{
        fetchLanguage()
    }, [])

Answer 1

您可以继续创建一个上下文来手动管理它，但这就像重新创建轮子一样。

您可以立即使用 i18next 和 react-i18next 支持应用程序范围的本地化，只需最少的设置，就像下面的 React Native 一样。

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';

// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them separated from your code: 
https://react.i18next.com/guides/multiple-translation-files)
const resources = {
  en: {
    "title": "Hello",
  },
  fr: {
    "title": "Bonjour",
  },
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    compatibilityJSON: 'v3',
    lng: 'en',  //default language.
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
});

export default i18n;

然后，您可以通过 docs 中描述的简单方法在应用程序中轻松使用这些翻译，

例如

const {t} = useTranslations();
....
return (
  <Text>{t('title')}</Text>
)

< strong>更新：让用户在应用程序内更改语言

您仍然可以使用此 i18next 让您的用户在应用程序内更改语言，只需在 i18 实例上调用一个简单的方法即可，如文档此处。

i18n.changeLanguage('fr');