react native（expo）多语言适配

于 2024-09-14 10:58:11 发布
阅读量29 收藏
点赞数 1
分类专栏： 玩转react native 文章标签： react native react.js javascript expo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23404533/article/details/142251559
版权

项目基于 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>
    );
}

React Native 开发经验
weixin_45942304的博客
03-08 825
React Native 开发时，如果只是写些简单的页面，基本上按着官方文档就能写出来，但是 React Native 的 API 有几百个，没有一定的开发踩坑经验，面对一些新的需求时确实会抓不到重点。本文总结了我个人开发 React Native 中遇到的问题和一些冷门的 API，如果有有缘人看到这篇文章并解决了实际问题，那就最好不过了。
react-native-darkmode-list:使用React Native和AWS AppSync的黑暗模式列表应用程序:black_circle:
05-09
JavaScript作为主要的编程语言，使得React Native项目具有广泛的社区支持和丰富的第三方库。在这个项目中，可能会使用一些库来增强功能，比如用于状态管理的Redux或者MobX，或者用于优化动画性能的react-native-...
reactNative进行屏幕适配
温壁
06-22 1004
reactNative对不同机型进行适配
React && React Native
123456789
08-16 1262
通过比较虚拟 DOM 的变化，React 可以确定要更新的最小元素集，并将这些变化应用到真实 DOM 上，以减少不必要的 DOM 操作，提高性能。尽管需要一些额外的工作来适配代码，但 React 和 React Native 使用相同的开发模型和语法，因此你可以借鉴 React 中的组件设计和业务逻辑，以更高效地构建移动应用程序。在 React 中，通过使用虚拟 DOM（Virtual DOM），将组件的状态和属性映射到真实 DOM 上，从而实现高效的 UI 渲染和更新。
React Native开发速记
曲折旅程，艰难人生
05-25 1921
React Native快速入门，精华笔记，辅助我们复习和记忆
React Native获取图片的真实大小自适应
suwu150
05-15 5601
React Native获取图片的真实大小我们在项目开发中，为了能够让图片在我们前端显示的时候不会变形，我们通常会根据图片本身的真实宽高进行计算比例，这种计算之后再设置给图片的属性，就能够展示出我们理想的图片。下面总结了下获取图片属性大小的方法。
react native Expo适配全面屏/Expo识别全面屏和正常屏
weixin_30896825的博客
04-09 665
一、最新版本的expo已经默认支持了全面屏，即不会像react native cli一样出现底部黑边 二、但是全面屏通过Dimensions.get('window')获取的高度还是不准确，因为全面屏的statusBar高度问题。 三、适配方案 通过获取屏幕纵横比来判断是否为全面屏 1、获取宽高 const {width,height} = Dimensions.get('window'...
react-native开发安卓端app
m0_73872315的博客
04-24 977
总之，第一次app开发还是颇废了我一番功夫的，可以说红温了很多次，不过好在最终没有夭折。。。接下来要做点啥好像暂时还没有思路，正在思考我需要点啥中。。。。
React Native BLE蓝牙通信
热门推荐
幻影的博客
05-07 5万+
由于项目需要，基于React Native 开发的App要跟BLE蓝牙设备通信。 在js.coach上搜索React Native BLE蓝牙组件，只找到三个组件： react-native-ble-manager：文档清晰明了，简单易懂，基本每个月都有更新，遇到问题提交issue作者也能及时回复，不确保能兼容所有BLE蓝牙设备。 react-native-ble-plx：文档阅读起来有点难...
React Native常用第三方组件汇总【建议收藏】
专注于dreamweaver网页设计制作
08-14 2361
小组件：https://github.com/react-native-material-design/react-native-material-design。颜色渐变：https://github.com/react-native-community/react-native-linear-gradient。滑动选项卡:https://github.com/skv-headless/react-native-scrollable-tab-view。...
Happenly-RN:活动门票营销应用程序UI-React Native Expo Project
05-04
标签为"JavaScript"，这意味着该项目主要使用JavaScript作为主要编程语言，因为React Native是基于JavaScript和React库的。React是一个用于构建用户界面的JavaScript库，尤其适合构建大型、复杂的应用程序。Expo则是...
Expo-Voxel：React使用React Native制作的Voxel Terrain。 ∛
01-31
通过React Native，开发者可以使用JavaScript语法创建原生的UI组件，这大大简化了多平台开发的过程，提高了开发效率。 Voxel地形是Expo-Voxel的核心部分。Voxels是一种三维像素，类似于2D图像中的像素，但它们在三...
React Native 快速搭建商城项目基础结构帖子附件代码
11-15
10. **测试与调试**：React Native支持Jest和Expo测试工具进行单元测试和集成测试。同时，可以使用React Native Debugger或Chrome开发者工具进行应用调试。 这个代码附件很可能是为了指导开发者如何快速建立一个...
【React Native】第三方组件
票票的博客
09-12 280
第三方组件：WebView、Picker、Swiper、AsyncStorage、Geolocation、Camera、ImagePicker、react-native-vector-icons
cross-plateform 跨平台应用程序-04-React Native 介绍
09-09 1808
React Native 是一个流行的开源框架，由 Facebook 开发，用于构建原生移动应用程序。它允许开发者使用 JavaScript 和 React 来开发 iOS 和 Android 应用。跨平台开发：React Native 允许开发者编写一次代码，然后将其部署到多个平台（iOS 和 Android），这大大减少了开发时间和成本。原生组件：React Native 使用原生平台的组件，这意味着应用程序能够提供与原生应用相同的性能和用户体验。热重载。
【App】React Native
票票的博客
09-11 302
React Native：核心组件、第三方组件、自定义组件、React Navigation、生命周期函数
基于react native的锚点
最新发布
在无知中学习，在学习中成长，在成长中学习
09-13 219
基于react native的锚点
React Native 0.76版本发布
xiangzhihong8的专栏
09-10 1036
关于 React Native 的 New Architecture 概念，最早应该是从 2018 年 RN 团队决定重写大量底层实现开始，因为那时候 React Native 面临各种结构问题和性能瓶颈，最终迫使 RN 团队开始进行重构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值