React-Native配置多语言切换react-native-i18n

一、准备阶段

1.react-native-i18n第三方多语言库

使用yarn:yarn add react-native-i18n;

使用npm:npm install react-native-i18n --save;

2.react-native link react-native-i18n

二、项目中使用

1.首先是新建英文版本的配置文件,en/index.js

export default {

    home: {

        tab_home: 'Home',

        tab_demo: 'Demo',

        exit: 'exit?',

    },

    demo: {

        dialog: 'dialog',

        button: 'button',

        switch: 'switch',

    }

};

2.然后是中文的zh/index.js

export default {

    home: {

        tab_home: '首页',

        tab_demo: '例子',

        exit: '是否退出?',

    },

    demo: {

        dialog: '提示框',

        button: '按钮',

        switch: '开关',

    }

};

3.默认的语言环境

上面写了2种语言配置,那么哪种作为初始化的呢?在业务层调用前,我们可以先进行预设

新建文件i18n/index.js

import i18n from 'react-native-i18n';

import en from './en';

import zh from './zh';

i18n.defaultLocale = 'en';

i18n.fallbacks = true;

i18n.translations = {

    en,

    zh,

};

export {i18n};

这边进行了一些预设,默认语境为en,允许fallbacks状态(为true时,顺序向下遍历翻译),预设转换的文件就2个,一个en一个zh,这个你也可以自行后续添加根据需求而定。

4.页面调用

import {i18n} from './src/i18n/index';

......

<Text>{i18n.t('home.buy_me_coffee')}</Text>

I18n.t('home')中的home参数就是在zh.js、en.js文件中的语言配置项。

具体显示内容会随着语言环境调用相应的语言配置文件,呈现给用户相应的语言内容。

I18n.getLanguages获取用户首选的语言环境

I18n.locale: 设置本地语言环境。

I18n.defaultLocale首选默认语言

I18n.fallbacks:如果获取到的系统语言类似en_USen-GB这样的,插件初始化的时候发现没有en_US.jsen-GB.js,这个时候如果设置了I18n.fallbacks = true;系统就会按这样的(en_USen.js)顺序去查找文件,就会去找有一个en.js这样的文件, 官方建议使用I18n.fallbacks = true;


参考自:https://www.jianshu.com/writer#/notebooks/25412168/notes/40126075

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 准备阶段: react-native-i18n 第三方多语言库安装: yarn add react-native-...
    giants_one阅读 15,893评论 22 36
  • 最近发现市场上对React Native开发人员的需求挺多的,自己就想学习一下React Native,多一...
    Yao_YongChao阅读 14,245评论 1 6
  • 持续更新中...... 一套企业级的 UI 设计语言和 React 实现。 https://mobile.ant....
    日不落000阅读 11,152评论 0 35
  • 曾经,多数旅游归来的人感叹最多的一句话便是:花钱买罪受。有一首关于旅游的打油诗曾这样写道,旅游是“上车睡觉,下车撒...
    caocao0215阅读 4,231评论 0 1
  • 花的种子在天空中四散 在黑暗中恣意盛开 红色和金色交织成的玫瑰 白色的大丽菊 8年前的那个晚上我陪着你看花束零落在
    相逢再分别阅读 2,312评论 2 5

友情链接更多精彩内容