[JavaScript知识库] react-native国际化

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> react-native国际化 -> 正文阅读

[JavaScript知识库]react-native国际化

基于 react-native-localize、 i18n-js两个包做国际化，先添加：

yarn add react-native-localize

yarn add i18n-js

ios要 cd ios & pod install 一下，

添加中文、英文的国际化文件：

en.js：

export default {
    hello: "Hello"
};

zh.js:

export default {
    hello: "你好"
};

I18n.js(国际化配置):

import I18n from "i18n-js";
import * as RNLocalize from "react-native-localize";

import en from "./locales/en";
import zh from "./locales/zh";

// 获取本机语言
const locales = RNLocalize.getLocales();

if (Array.isArray(locales)) {
    // 取第一个做默认语言
    I18n.locale = locales[0].languageTag;
}

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

I18n.changeLanguage = language => {
    I18n.locale = language;
}


export default I18n;

App.js:

import React from 'react';
import I18n from "./src/utils/I18n";
import {SafeAreaView, Text, View,} from 'react-native';
import {Colors} from "react-native/Libraries/NewAppScreen";


const AppData = () => {
    const backgroundStyle = {
        backgroundColor: Colors.light,
    };
    return (
        <SafeAreaView style={backgroundStyle}>
            <View style={{
                height: '100%',
                width: '100%',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
            }}>
                <Text>
                    {I18n.t("hello")}
                </Text>
            </View>
        </SafeAreaView>
    )
}

const App2 = () => {
    return (
        <AppData/>
    )
}

export default App2;