在 App React Native 的所有屏幕中更新变量

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>  
  )
}

现在，当我按下按钮后转到任何屏幕时，我希望内容以法语呈现，如果我在另一个屏幕中更改语言，我希望 changer la langue 在此屏幕中呈现

内存泄漏

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 and 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>
)

更新：允许用户在应用内更改语言

您仍然可以使用此 i18next 让您的用户从应用程序中更改语言，只需在 i18 实例上调用一个简单的方法，如记录 here。

i18n.changeLanguage('fr');

在 App React Native 的所有屏幕中更新变量

Update variable in all screens of the App React Natice

variables

screen

updates

react-native