如何检测我的 React Native 应用程序中 Android 系统语言的更改？

Question

如何检测Android系统语言的变化，以免我的应用程序崩溃？

我有多个使用 i18next 进行翻译的组件。其中一个组件是时间轴.tsx，如下所示

import '../locales/index';
import { useTranslation } from 'react-i18next';

const { t } = useTranslation();

./src/components/timeline.tsx

Index.js 定义如下。

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';
import en from './en.json';
import ja from './ja.json';

const resources = {
    en: {
        translation: en,
    },
    ja: {
        translation: ja,
    },
};

const languageDetector = {
    type: 'languageDetector',
    async: true,
    detect: (callback) => {
        const locales = RNLocalize.getLocales();
        const bestLanguage = locales[0]?.languageTag || 'en';
        callback(bestLanguage);
    },
    init: () => { },
    cacheUserLanguage: () => { },
};

i18n
    .use(languageDetector)
    .use(initReactI18next)
    .init({
        resources,
        fallbackLng: 'en',
        compatibilityJSON: 'v3',
        interpolation: {
            escapeValue: false,
        },
    });

export default i18n;

./src/locales/index.js

Answer 1

我认为更好的方法是使用列表器并修改其中的方法，这是您可以跟进的一些方法。

1. 修改

   index.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';
import en from './en.json';
import ja from './ja.json';

const resources = {
    en: {
        translation: en,
    },
    ja: {
        translation: ja,
    },
};

const languageDetector = {
    type: 'languageDetector',
    async: true,
    detect: (callback) => {
        const locales = RNLocalize.getLocales();
        const bestLanguage = locales[0]?.languageTag || 'en';
        callback(bestLanguage);
    },
    init: () => {},
    cacheUserLanguage: () => {},
};

i18n
    .use(languageDetector)
    .use(initReactI18next)
    .init({
        resources,
        fallbackLng: 'en',
        compatibilityJSON: 'v3',
        interpolation: {
            escapeValue: false,
        },
    });

export default i18n;

1. 函数处理语言更改

import i18n from './index';
import * as RNLocalize from 'react-native-localize';

const handleLocalizationChange = () => {
    const locales = RNLocalize.getLocales();
    const bestLanguage = locales[0]?.languageTag || 'en';
    i18n.changeLanguage(bestLanguage);
};

export default handleLocalizationChange;

你可以在

App.js

中调用它

import React, { useEffect } from 'react';
import { I18nextProvider } from 'react-i18next';
import i18n from './locales';
import * as RNLocalize from 'react-native-localize';
import handleLocalizationChange from './locales/languageChangeHandler';

const App = () => {
    useEffect(() => {
        // Set up the localization change listener
        RNLocalize.addEventListener('change', handleLocalizationChange);

        // Clean up the listener on unmount
        return () => {
            RNLocalize.removeEventListener('change', handleLocalizationChange);
        };
    }, []);

    return (
        <I18nextProvider i18n={i18n}>
            {/* Your app components */}
        </I18nextProvider>
    );
};

export default App;

1. Timeline.js

import React from 'react';
import { useTranslation } from 'react-i18next';
import '../locales/index';

const Timeline = () => {
    const { t } = useTranslation();

    return (
        <div>
            {/* Your component JSX */}
            {t('your_translation_key')}
        </div>
    );
};

export default Timeline;

这应该使过渡顺利，没有任何问题，这与我使用的方法有些相似。如有必要，请随时进行更改。