如何在React Native应用中检测Android系统语言变化并避免崩溃

当前你的i18n初始化代码仅在应用启动时检测一次系统语言，当Android系统语言切换后，应用不会自动更新语言设置，可能导致多语言组件渲染异常甚至崩溃。下面是具体修复方案：

1. 监听系统语言变化事件 #

在./src/locales/index.js中添加RNLocalize的语言变化监听，触发时同步更新i18n的当前语言：

修改后的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: (lng) => {
        // 可选：缓存用户语言，下次启动优先使用
    },
};

// 监听系统语言变更并更新i18n
const handleLanguageChange = () => {
    const locales = RNLocalize.getLocales();
    const newLanguage = locales[0]?.languageTag || 'en';
    i18n.changeLanguage(newLanguage);
};

RNLocalize.addEventListener('change', handleLanguageChange);

// 可选：应用退出时移除监听，避免内存泄漏
// 可结合AppState监听后台状态实现

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

export default i18n;

2. 确保组件正确响应语言变化 #

你的timeline.tsx中useTranslation调用不能放在组件顶层，必须在函数组件内部使用，这样语言变化时组件才会自动重新渲染：

修改后的timeline.tsx代码：

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

const Timeline = () => {
    const { t } = useTranslation();
    
    // 组件渲染逻辑
    return (
        <>{t('timeline.xxx')}</>
    );
};

export default Timeline;

3. 可选优化：语言缓存机制 #

如果需要保留用户手动切换的语言（而非完全跟随系统），可通过AsyncStorage实现缓存：

import AsyncStorage from '@react-native-async-storage/async-storage';

const languageDetector = {
    type: 'languageDetector',
    async: true,
    detect: async (callback) => {
        // 优先读取缓存语言
        const cachedLang = await AsyncStorage.getItem('user_language');
        if (cachedLang) {
            callback(cachedLang);
            return;
        }
        // 无缓存则读取系统语言
        const locales = RNLocalize.getLocales();
        const bestLanguage = locales[0]?.languageTag || 'en';
        callback(bestLanguage);
    },
    cacheUserLanguage: async (lng) => {
        await AsyncStorage.setItem('user_language', lng);
    },
};

内容的提问来源于stack exchange，提问作者tsuyoski