项目基于 expo框架 开发。请先配置好 expo 开发环境
1.引入i18n-js
npx expo install i18n-js
2.新建languages文件夹，其中包括英文、中文等语种目录。结构如下：
*.json文件为语种翻译后的json键值对，用于UI中引用;
{
"appName": "xxxx",
"appVersion": "xxxx",
"Login": {
"login": "登录"
},
"Register": {
"register": "注册"
},
"PaymentWay": {
"alipay": "支付宝",
"wxpay": "微信支付",
"bank": "银行卡",
"Instant": "即时支付",
"reviewing": "审核中",
"ReviewRejected": "审核拒绝",
"ReviewSuccess": "审核通过",
"walletAddress": "钱包地址",
"walletDetail": "钱包详情",
"info1": "买家将直接使用您选择的收款方式付款。交易时，请始终检查您的收款账户以确认您已收到全额付款。",
"info2": "请确保您设置的账户为本人实名账户，非本人实名账户付款会导致订单失败且账号被冻结。",
"PaymentTerms": "收付款方式",
"PaymentTermsDetail": "收付款方式详情",
"SelectPaymentTerms": "选择收付款方式",
"SelectIncomeTerms": "请选择收款方式",
"IncomeTerms": "选择收款方式",
"selectCurrency": "请选择货币",
"Currency": "选择货币",
"NotImgMessage": "未读取到图片信息",
"realName": "请输入真实姓名",
"Name": "姓名",
"Account": "账号",
"AccountLimit": "账号长度必须在%{min_limit}-%{max_limit}之间",
"selectedPaymentWayTips": "请先选择收付款方式",
"PaymentTermsInfo": "请补全收付款方式信息",
"bankName": "请输入银行名称",
"bankName2": "银行名称",
"openBankName": "请输入开户行",
"openBankName2": "开户行",
"qrcode": "请上传二维码",
"qrcode2": "二维码",
"addPaymentTerms": "添加收付款账号",
"info3": "某些支付方式可能会有支付服务提供方设定的手续费和每日限额，请联系支付服务提供方了解详情。",
"edit": "完成修改",
"add": "完成添加"
}
}
languages下的index.js配置如下：
import {getLocales} from "expo-localization";
import {I18n} from "i18n-js";
import {enStringJson} from "./en";
import {jaStringJson} from "./japanese";
import {zhStringJson} from "./zh";
import LogUtil from "../../utils/log_util";
import {zhTwStringJson} from "./zh_tw";
import {esStringJson} from "./es";
import AsyncStorage from "@react-native-async-storage/async-storage";
// Set the key-value pairs for the different languages you want to support.
const translations = {
'en': enStringJson,
'en-US': enStringJson,
// ja: jaStringJson,
'zh': zhStringJson,
'zh-CN': zhStringJson,
'zh-Hans-CN': zhStringJson,
'zh-TW': zhTwStringJson,
'zh-Hant-TW': zhTwStringJson,
'zh-HK': zhTwStringJson,
'zh-SG': zhTwStringJson,
'es': esStringJson,
'es-ES': esStringJson,
'es-AD': esStringJson,
'es-AR': esStringJson,
'es-US': esStringJson,
'es-MX': esStringJson,
'es-GT': esStringJson,
};
export const i18n = new I18n(translations);
export async function initI18n() {
let res = await AsyncStorage.getItem('language');
if (res) {
i18n.locale = res;
} else {
// Set the locale once at the beginning of your app.
let languageTag = getLocales()[0].languageTag;
if (translations[languageTag]) {
i18n.locale = languageTag;
await AsyncStorage.setItem('language', languageTag);
} else {
i18n.locale = 'en-US';
await AsyncStorage.setItem('language', 'en-US');
}
}
// When a value is missing from a language it'll fall back to another language with the key present.
i18n.enableFallback = true;
// To see the fallback mechanism uncomment the line below to force the app to use the Japanese language.
// i18n.locale = 'ja';
LogUtil.log('initI18n languageCode = ', getLocales()[0].languageCode, '', getLocales()[0].languageTag);
return i18n.locale;
}
3.在app.js中初始化引用
import {Provider, Toast} from "@ant-design/react-native";
import VConsole from '@kafudev/react-native-vconsole';
import * as Font from 'expo-font';
import { useEffect, useState } from "react";
import { StatusBar, View } from 'react-native';
import Loading from "./components/ui/Loading";
import Navigations from './navigations';
import {initI18n} from "./assets/languages";
import {JPushInit} from "./utils/jpush_utils";
import { eventBus } from "./utils/eventbus_util";
import LogUtil from "./utils/log_util";
import { EVENT } from "./constants/event";
import enUS from '@ant-design/react-native/lib/locale-provider/en_US'
import zhCN from '@ant-design/react-native/lib/locale-provider/zh_CN'
export default () => {
StatusBar.setBarStyle('dark-content')
const [isReady, setReady] = useState(false);
let [currentLocale, setCurrentLocale] = useState();
useEffect(() => {
loadAtdFont().then(res => { });
}, []);
useEffect(() => {
let listener = eventBus.addListener(EVENT.GLOBAL_REFRESH_LANGUAGE, (args) => {
LogUtil.log('application GLOBAL_REFRESH_LANGUAGE args', args);
setCurrentLocale(args?.language?.includes('zh') ? zhCN : enUS);
});
return () => {
listener.remove()
}
}, [])
const loadAtdFont = async () => {
// 初始化JPush
// JPushInit();
// initial多语言
const localTag = await initI18n();
setCurrentLocale(localTag.includes('zh') ? zhCN : enUS);
await Font.loadAsync(
'antoutline',
// eslint-disable-next-line
require('@ant-design/icons-react-native/fonts/antoutline.ttf')
);
await Font.loadAsync(
'antfill',
// eslint-disable-next-line
require('@ant-design/icons-react-native/fonts/antfill.ttf')
);
// 吐司全局配置
Toast.config({ duration: 1.5 });
// eslint-disable-next-line
setReady(true);
}
return !isReady ? (
<Loading />
) : (<Provider theme={{}} locale={currentLocale}>
<View style={{ flex: 1 }}>
<StatusBar translucent={true} backgroundColor="rgba(0, 0, 0, 0)" />
<Navigations />
{process.env.EXPO_PUBLIC_ConsoleFetch ? (
<VConsole
// 使用 'react-native-config-reader' 库获获取额外信息
appInfo={{
原生构建类型: 'all',
原生版本号: '0.0.1',
原生构建时间: 'none',
热更新版本号: '00001',
热更新详情: 'UI更新',
}}
// 另外的的面板
// panels={panels}
// console.time 可辨别是否开启 debug 网页
console={process.env.EXPO_PUBLIC_ConsoleFetch ? !console.time : true}
/>
) : null}
</View>
</Provider>
);
}
4.代码中引用
i18n.t('appName');
i18n.t('Login.login');
i18n.t('PaymentWay.AccountLimit', { min_limit: 10, max_limit: 100 });
5.多语言切换功能
5.1 引入ant 适用于react native的UI库
@ant-design/react-native
@react-native-async-storage/async-storage
新建eventBus、EVENT类用于切换语种后通知页面刷新
import RCTDeviceEventEmitter from 'react-native/Libraries/EventEmitter/RCTDeviceEventEmitter';
export const eventBus = RCTDeviceEventEmitter;
export const EVENT = {
GLOBAL_REFRESH_LANGUAGE: 'GLOBAL_REFRESH_LANGUAGE',
}
新建AntPopup组件用于弹窗选择语种
import react from "react";
import {scaleSize, screenH} from "../../utils/screen_util";
import {Modal} from "@ant-design/react-native";
import React from "react";
import TextWrapper from "./TextWrapper";
import stl from "../../stl";
import ViewWrapper from "./ViewWrapper";
const AntPopup = (props) => {
return (
<Modal
style={{
borderTopStartRadius: scaleSize(6),
borderTopEndRadius: scaleSize(6),
}}
popup={props.popup ?? true}
transparent={props.transparent ?? false}
maskClosable={true}
visible={props.showPopup}
animationType="slide-up"
onClose={props.onClose}
onRequestClose={props.onRequestClose}
>
<ViewWrapper style={[{ maxHeight: screenH / 2, paddingVertical: scaleSize(20), paddingHorizontal: 0, alignItems: 'center'}, props.style]}>
{props.title ? (
<TextWrapper style={[stl.fontSize19, stl.FC626262, stl.MB27]}>
{props.title}
</TextWrapper>
) : null}
{props.children}
</ViewWrapper>
</Modal>
);
}
export default react.memo(AntPopup);
5.2 新建语种切换页面 AnotherSettingScreen
import ViewWrapper from "../../../components/ui/ViewWrapper";
import HeaderView2 from "../../../components/HeaderView2";
import NavPaddingGray from "../../../components/ui/NavPaddingGray";
import ArrowLineStyle from "../../../components/ui/ArrowLineStyle";
import React, {useEffect} from "react";
import {scaleSize} from "../../../utils/screen_util";
import AntPopup from "../../../components/ui/AntPopup";
import stl from "../../../stl";
import {Radio} from "@ant-design/react-native";
import ImageWrapper from "../../../components/ui/ImageWrapper";
import TextWrapper from "../../../components/ui/TextWrapper";
import LogUtil from "../../../utils/log_util";
import {i18n} from "../../../assets/languages";
import {getLocales, useLocales} from "expo-localization";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {View} from "react-native";
import {eventBus} from "../../../utils/eventbus_util";
import {EVENT} from "../../../constants/event";
import { APP_VERSION_CODE } from "../../../constants/common";
import Loading from "../../../components/ui/Loading";
const AnotherSettingScreen = ({route, navigation}) => {
const languageOptions = {
type: 'language',
title: i18n.t('MyRoute.anotherSetting.selectLang'),
list: [
{icon: '', value: 'zh-Hans-CN', label: i18n.t('MyRoute.anotherSetting.zh'), desc: ''},
{icon: '', value: 'zh-Hant-TW', label: i18n.t('MyRoute.anotherSetting.zh-tw'), desc: ''},
{icon: '', value: 'en-US', label: i18n.t('MyRoute.anotherSetting.en-US'), desc: ''},
// {icon: '', value: 'es-ES', label: i18n.t('MyRoute.anotherSetting.es-ES'), desc: ''}
]
}
const [showPopup, setShowPopup] = React.useState(false);
const [selectValue, setSelectValue] = React.useState();
const [currentLanguage, setCurrentLanguage] = React.useState();
useEffect(() => {
AsyncStorage.getItem('language').then(res => {
LogUtil.log('AsyncStorage.getItem language = ', res);
if (res) {
setSelectValue(res);
setCurrentLanguage(formatCurrentLanguage(res));
}
})
}, []);
useLocales();
function formatCurrentLanguage(value) {
LogUtil.log('formatCurrentLanguage value = ', value);
return value === 'zh-Hans-CN' ? i18n.t('MyRoute.anotherSetting.zh') : (value === 'zh-Hant-TW' ? i18n.t('MyRoute.anotherSetting.zh-tw') : (value === 'en-US' ? i18n.t('MyRoute.anotherSetting.en-US') : (value === 'es-ES' ? i18n.t('MyRoute.anotherSetting.es-ES') : null)));
}
function handleChangeLang() {
setShowPopup(true);
}
function handleUpdateAppVersion() {
}
const onChange = async (event, type) => {
LogUtil.log('radio checked', event.target.value);
// let eventToJson = JSON.parse(event.target.value);
Loading.show();
await AsyncStorage.setItem('language', event.target.value).then(r => { });
i18n.locale = event.target.value;
setSelectValue(event.target.value);
setCurrentLanguage(formatCurrentLanguage(event.target.value));
eventBus.emit(EVENT.GLOBAL_REFRESH_LANGUAGE, { language: event.target.value });
Loading.hide();
setShowPopup(false);
}
return (
<ViewWrapper>
<HeaderView2 title={i18n.t('MyRoute.anotherSetting.setting')}/>
<NavPaddingGray/>
<ArrowLineStyle
style={{backgroundColor: "white", paddingHorizontal: scaleSize(20.5)}}
title={i18n.t('MyRoute.anotherSetting.switchLang')}
subTitle={currentLanguage}
onPress={() => {
handleChangeLang();
}}
/>
<ArrowLineStyle
style={{backgroundColor: "white", paddingHorizontal: scaleSize(20.5)}}
title={i18n.t('MyRoute.anotherSetting.updateApp')}
subTitle={i18n.t('version') + `：${APP_VERSION_CODE}`}
onPress={() => {
handleUpdateAppVersion();
}}
/>
<AntPopup
title={languageOptions.title}
showPopup={showPopup}
onClose={() => {
setShowPopup(false)
}}
onRequestClose={() => {
setShowPopup(false);
return true;
}}>
<ViewWrapper style={[stl.widthPercent100]}>
<>
<Radio.Group
styles={{checkbox_label: {fontSize: scaleSize(15), color: '#626262'}}}
// options={options}
onChange={onChange}
value={selectValue}>
{languageOptions?.list?.map((option, index) => (
<Radio.RadioItem
key={index}
styles={{
Line: { paddingRight: scaleSize(4) },
Item: { paddingLeft: scaleSize(0) },
Content: { paddingLeft: scaleSize(20) },
}}
value={option.value}
>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
{option.icon ? (
<ImageWrapper
style={{
width: scaleSize(16),
height: scaleSize(16),
}}
source={option.icon}
/>
) : null}
<ViewWrapper style={{width: scaleSize(12)}}/>
<TextWrapper style={[stl.fontSize15, stl.FC626262]}>{option.label}</TextWrapper>
<ViewWrapper style={{width: scaleSize(12)}}/>
<TextWrapper style={[stl.fontSize12, stl.FCB2B2B2]}>{option.desc}</TextWrapper>
</View>
</Radio.RadioItem>
))}
</Radio.Group>
</>
</ViewWrapper>
</AntPopup>
</ViewWrapper>
);
}
export default AnotherSettingScreen;
5.3 新建一个测试页面 mainPage用于验证切换语种后文案刷新
import React, { useEffect, useState } from 'react';
const MainPageScreen = ({route, navigation}) => {
let [fresh, setFresh] = useState(1);
useEffect(() => {
let listener = eventBus.addListener(EVENT.GLOBAL_REFRESH_LANGUAGE, (args) => {
LogUtil.log('MainPageScreen GLOBAL_REFRESH_LANGUAGE args', args);
// 切换了语种，通知页面刷新
setFresh(prevState => prevState + 1);
});
return () => {
listener.remove()
}
}, [])
return (
<View>
<Text>{ i18n.t('appName') }</Text>
<Text>{ i18n.t('Login.login') }</Text>
<Text>{ i18n.t('PaymentWay.AccountLimit', { min_limit: 10, max_limit: 100 }) }</Text>
<Button onPress={()=>{
navigation.push('AnotherSettingScreen');
}}>
跳语种切换页面
</Button>
</View>
);
}