React native 国际化方案/多语言切换 i18n_react native 多语言_iMingzhen

irpas 02-07 7719

React native 国际化方案/多语言切换 i18n 1.安装所需要的库2.目录设计3.开始开发3.1 index.js3.2 语言包配置3.3 App.js载入 4. 在页面中使用

1.安装所需要的库

最开始我是去github找到了react-native-i18这个库，但发现官方文档声明已经过时了，于是就去找了其他的实现方案最终得到以下结果

安装i18next 以及 react-i18next yarn add i18next react-i18next

安装完成，接下来编写相关代码

2.目录设计

我想我们需要简洁的目录结构，为了能够更好的维护

src locales 国际化文件夹 index.js 主要文件languages 语言包文件夹 enUS.json 英文语言包zhCN.json 中文语言包 App.js 3.开始开发 3.1 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; 3.2 语言包配置

zhCN.json

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

enUS.json

{ "hello": "hello", "world": "world" } 3.3 App.js载入

只需要一步即可在你的App.js页面加入以下代码引入 import './src/locales/index'

示例 --------注意--------- 需要将AppNavigator的部分，修改为你的业务组件

import React from "react"; import AppNavigator from "./src/navigator/AppNavigator"; import './src/locales/index' // 引入文件 const App = () => { return ( <AppNavigator /> ); }; export default App; 4. 在页面中使用

以下为一个页面组件，我们将实现文本的渲染以及文字的切换需要注意的便是在需要使用到多语言相关内容的函数组件中使用hook:useTranslation

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;

最终效果如下点击按钮时便可以切换语言~