React Native国际化

# 安装

react-native-i18n (opens new window)该库已弃用，改用react-i18next (opens new window)

安装
```
yarn add i18next react-i18next
```
1
目录结构
- locales国际化文件夹
  - index.js主要文件
  - languages语言包文件夹
    - enUS.json英文语言包
    - zhCN.json中文语言包

index.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
// 自編語言包
import en from './languages/enUS.json'
import zh from './languages/zhCN.json'

const resources = {
    en: {
        translation: en
    },
    zh: {
        translation: zh
    }
}

i18n
    .use(initReactI18next)
    .init({
        compatibilityJSON: 'v3', // 对安卓进行兼容
        resources,
        fallbackLng: 'zh', // 默认语言，也是设置语言时设置了不存在的语言时使用的
        interpolation: {
            escapeValue: false
        }
    }, (err) => {
        // 錯誤
        if (err) throw err;
        // 这里放多一层函数是为了方便之后切换语言的同时做一些其他的统一处理
        i18n.setLocalLanguage = function (value) {
            // 設置項目文本的語言
            this.changeLanguage(value);
            // 做点别的，比如同时切换别的插件的语言
        }
        // 初始化
        i18n.setLocalLanguage(i18n.language);
    });


export default i18n;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

语言包配置

zhCN.json

{
	"hello":"你好",
    "lng": "Chinese",
}

1
2
3
4

enUS.json

{
    "hello": "hello",
    "world": "world"
}

1
2
3
4

App.js载入

引入import './src/locales/index'

import React from "react";
import AppNavigator from "./src/navigator/AppNavigator";
import './src/locales/index' // 引入文件

const App = () => {
  return (
    <AppNavigator />
  );
};
export default App;

1
2
3
4
5
6
7
8
9
10

在jsx页面使用

import React from "react";
import { View, Text, Button } from "react-native";

import { useTranslation } from 'react-i18next'


const HomeScreen = (props) => {
  // 拿到i18n
  const { i18n } = useTranslation();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>当前语言包:{i18n.language}</Text>
      <Text>{i18n.t("hello")}{i18n.t("world")}</Text>
      <Button title='切换为中文' onPress={() => i18n.changeLanguage('zh')}></Button>
      <Button title='切换为英文' onPress={() => i18n.changeLanguage('en')}></Button>
    </View>
  );
};

export default HomeScreen;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在js页面使用

import i18n from "i18next";
export const alert = (title: string, content: string) => {
    Alert.alert(title, content, [{
        text: i18n.t("done"),
    }]);
};

1
2
3
4
5
6

上次更新: 2024/08/14, 04:14:33

← React Native扫描二维码 React Native使用antd库报警告→