react-native 多语言切换

可以使用 i18n.js实现。  I18N主js是配置语言。 setLanguage是更改语言 。 languageupdate是监听语言变化(比如监听语言变化进行setState)

I18n

/**
 * 多语言配置文件
 */
import I18n from "i18n-js";
// import * as RNLocalize from "react-native-localize";
import cn from './lang/cn';
import en from './lang/en';
import th from './lang/th';
import store from '../store/store';
import Map from "../config/Map";

// const locales = RNLocalize.getLocales();
// const systemLanguage = locales[0]?.languageCode;  // 用户系统偏好语言
const userLanguageSetting = store.getState().publicStore.userLanguageSetting;  // 用户手动设置语言
I18n.locale = userLanguageSetting;
// if (userLanguageSetting) {
//     I18n.locale = userLanguageSetting;
// } else if (systemLanguage && Map.LANG_SETTING.includes(systemLanguage)) {
//     I18n.locale = systemLanguage;
// } else {
//     I18n.locale = 'en';  // 用户既没有设置，也没有获取到系统语言时，默认加载英语语言资源
// }

// 监听应用运行过程中语言的变化
store.subscribe(() => {
    const newUserLanguageSetting = store.getState().publicStore.userLanguageSetting;
    console.log('.....newUserLanguageSetting....', newUserLanguageSetting);
    console.log('.....userLanguageSetting....', I18n.locale);
    if (newUserLanguageSetting && newUserLanguageSetting !== I18n.locale) {
        I18n.locale = newUserLanguageSetting;
    }
});

I18n.fallbacks = true;
I18n.translations = {
    zh: cn,
    en,
    th,
};

export default I18n;
// export { systemLanguage };

setLanguage.js 

/**
 * 设置语言界面
 */
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import {setLanguage} from "../store/publicStore/action";

class SetLanguage extends React.Component {
    constructor(props) {
        super(props);
    }
    render(): React.ReactNode {
        return (
            <View>
                <TouchableOpacity onPress={() => {
                    this.props.setLanguage('en');
                }}>
                    <Text>英文</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => {
                    this.props.setLanguage('zh');
                }}>
                    <Text>中文</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => {
                    this.props.setLanguage('th');
                }}>
                    <Text>泰文</Text>
                </TouchableOpacity>
            </View>
        );
    }
}
const mapStateToProps = state => ({
    userLanguageSetting: state.publicStore.userLanguageSetting
});
const mapDispatchToProps = dispatch => ({
    setLanguage: lang => dispatch(setLanguage(lang))
});
export default connect(mapStateToProps, mapDispatchToProps)(SetLanguage);

languageUpdate.js

import React, { useState, useEffect } from 'react';
import {View} from "react-native";
import store from '../store/store';
import I18n from './index';

const UseLanguageUpdate = ({onLanguageChangeCallBack, listenParamArr = []}) => {
    const [currentLanguageCode, setCurrentLanguageCode] = useState( I18n.locale);

    useEffect(() => {
        return store.subscribe(() => {
            const newUserLanguageSetting = store.getState().publicStore.userLanguageSetting;
            console.log('newUserLanguageSetting....', newUserLanguageSetting);
            console.log('currentLanguageCode....', currentLanguageCode);
            if (newUserLanguageSetting && newUserLanguageSetting !== currentLanguageCode) {
                setCurrentLanguageCode(newUserLanguageSetting);
                if (onLanguageChangeCallBack) onLanguageChangeCallBack();
            }
        });
    }, [currentLanguageCode, ...listenParamArr]);
    return (
        <View />
    )
};
export default UseLanguageUpdate;