Detailed explanation of React-Native global multi-language switching tool library react-native-i18n-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of React-Native global multi-language switching tool library react-native-i18n

小云云

Dec 28, 2017 am 11:28 AM

react-native globalization tool

This article mainly introduces the detailed explanation of the React-Native global language switching tool library react-native-i18n. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

##Support RN version All versionsSupported platformsiOS+AndroidDo you need NativeModuleYesIs it portable?YesWhether it contains jni moduleNo

Attribute	Explanation

Usage:

1.install (omitted, it’s all written in git, just npm things)

2. Used in the project

Because they are some static attribute references, you can use redux for storage and replacement, or you can drink them directly (this article takes en and zh as examples).

First, build the English version of the configuration file, en/index.js

export default {
 home: {
  greeting: &#39;Greeting in en&#39;,
  tab_home: &#39;Home&#39;,
  tab_donate: &#39;Donate&#39;,
  tab_demo: &#39;Demo&#39;,
  language: &#39;language&#39;,
  live_demo: &#39;Live Demo&#39;,
  buy_me_coffee: &#39;Buy me a coffee&#39;,
  gitee: &#39;Gitee&#39;,
  star_me: &#39;Star me&#39;,
  donate: &#39;donate&#39;,
  exit: &#39;exit?&#39;,
 },
 donate: {
  donate: &#39;donate us~~~&#39;,
  donate_desc: &#39;© 2017 Pactera Technology International Limited. All rights reserved.&#39;,
 },
 demo: {
  dialog: &#39;dialog&#39;,
  button: &#39;button&#39;,
  switch: &#39;switch&#39;,
  action_sheet: &#39;Action Sheet&#39;,
 }
};

Copy after login

Then the Chinese zh/index.js

export default {
 home: {
  greeting: &#39;Greeting in zh&#39;,
  tab_home: &#39;首页&#39;,
  tab_donate: &#39;捐赠&#39;,
  tab_demo: &#39;例子&#39;,
  language: &#39;语言&#39;,
  live_demo: &#39;例子&#39;,
  buy_me_coffee: &#39;请我一杯coffee&#39;,
  gitee: &#39;Gitee&#39;,
  star_me: &#39;关注我&#39;,
  donate: &#39;贡献&#39;,
  exit: &#39;是否退出?&#39;,
 },
 donate: {
  donate: &#39;支持我们～~&#39;,
  donate_desc: &#39;© 2017 Pactera Technology International Limited. All rights reserved.&#39;,
 },
 demo: {
  dialog: &#39;提示框&#39;,
  button: &#39;按钮&#39;,
  switch: &#39;开关&#39;,
  action_sheet: &#39;&#39;,
 }
};

Copy after login

The attribute names and structures are the same, but the attributes are different. Of course, these are two static files. If the scenario requires that the server can send json, it will be completely dynamic. This part It depends on the business needs.

2.1 Default language environment

We have written 2 language configurations above, so which one is used for initialization? Before calling the business layer, we can make presets first

i18n/index.js

import i18n from &#39;react-native-i18n&#39;;
import en from &#39;./en&#39;;
import zh from &#39;./zh&#39;;

i18n.defaultLocale = &#39;en&#39;;
i18n.fallbacks = true;
i18n.translations = {
 en,
 zh,
};

export {i18n};

Copy after login

There are some presets here, the default context If it is en, the fallbacks state is allowed (when it is true, the translation will be traversed downwards in order). There are only 2 files converted by default, one en and one zh. You can also add this later according to your needs.

2.2 Business layer call

First, reverse the package

import {i18n} from 'the directory of your default index';

Call (Take a Toast as an example)

 ToastAndroid.show(i18n.t(&#39;home.exit&#39;),ToastAndroid.SHORT);

Copy after login

The two output results are as follows:

Detailed explanation of React-Native global multi-language switching tool library react-native-i18n

Source code analysis

The implementation of this library is divided into two parts, one part is the Native version judgment and other functions and the core implementation of the js part fnando/i18n-js

i18n-js is a lightweight js translation library that supports conversion of various formats and content and switching of language content. The address is as follows: https://github.com/fnando/i18n-js

So the translation and conversion is done by I18n.js, so what has Native done? Let’s find out (take Android as an example, Apple can’t understand it, sorry)

Detailed explanation of React-Native global multi-language switching tool library react-native-i18n

Native code only has two classes, so I said before that you copy the Native code directly Then the project can also achieve this effect by relying on I18n.js

RNI18nPackage is an ordinary Package class. Its function is to add our module to the list in the getPackages() method of the main application, and then together Just put it in the bag.

The specific functions are all in RNI18nModule

public class RNI18nModule extends ReactContextBaseJavaModule {

 public RNI18nModule(ReactApplicationContext reactContext) {
 super(reactContext);
 }
 //RN调用的控件名
 @Override
 public String getName() {
 return "RNI18n";
 }

 //对取出的Locale列表进行格式化的方法
 private String toLanguageTag(Locale locale) {
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  return locale.toLanguageTag();
 }

 StringBuilder builder = new StringBuilder();
 builder.append(locale.getLanguage());

 if (locale.getCountry() != null) {
  builder.append("-");
  builder.append(locale.getCountry());
 }

 return builder.toString();
 }

 private WritableArray getLocaleList() {
 WritableArray array = Arguments.createArray();

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
  //获取区域设置列表。这是获取区域的首选方法。
  LocaleList locales = getReactApplicationContext()
   .getResources().getConfiguration().getLocales();

  for (int i = 0; i < locales.size(); i++) {
  array.pushString(this.toLanguageTag(locales.get(i)));
  }
 } else {
  array.pushString(this.toLanguageTag(getReactApplicationContext()
   .getResources().getConfiguration().locale));
 }

 return array;
 }

 //js端可获取属性的列表
 @Override
 public Map<String, Object> getConstants() {
 HashMap<String, Object> constants = new HashMap<String,Object>();
 constants.put("languages", this.getLocaleList());
 return constants;
 }

 //提供给js端调用的方法，用来获取默认的语言环境，回调方式用的是promise
 @ReactMethod
 public void getLanguages(Promise promise) {
 try {
  promise.resolve(this.getLocaleList());
 } catch (Exception e) {
  promise.reject(e);
 }
 }
}

Copy after login

Add a toast to see what will happen in locale

Copy Code The code is as follows:

Toast.makeText(getReactApplicationContext(),"locales.get(i) "+locales.get(i),Toast.LENGTH_LONG).show();

The effect is as follows:

Detailed explanation of React-Native global multi-language switching tool library react-native-i18n

I wanted to find out the internal implementation, but it turned out to be a non-public class

Detailed explanation of React-Native global multi-language switching tool library react-native-i18n

Summary:

First, Native obtains the LocaleList of this phone, then formats it and takes the first element, which is processed by I18n.js, and then I18n.js selects a set of effective language rules based on the key, and then the process is the same as the order of use.

The entire library is less difficult to integrate and easier to use. There are no big pitfalls when using it. It is more delicious when combined with redux.

Related recommendations:

React-intl implementation of multi-language examples detailed explanation

PHP - implementation of multi-language automatic switching

PHP - Automatic multi-language switching

The above is the detailed content of Detailed explanation of React-Native global multi-language switching tool library react-native-i18n. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

4 weeks ago By DDD

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1663

CakePHP Tutorial

1420

Laravel Tutorial

1313

PHP Tutorial

1266

C# Tutorial

1239

Related knowledge

What kind of software is a digital currency app? Top 10 Apps for Digital Currencies in the World Apr 30, 2025 pm 07:06 PM

With the popularization and development of digital currency, more and more people are beginning to pay attention to and use digital currency apps. These applications provide users with a convenient way to manage and trade digital assets. So, what kind of software is a digital currency app? Let us have an in-depth understanding and take stock of the top ten digital currency apps in the world.

What is the difference between php framework laravel and yii Apr 30, 2025 pm 02:24 PM

The main differences between Laravel and Yii are design concepts, functional characteristics and usage scenarios. 1.Laravel focuses on the simplicity and pleasure of development, and provides rich functions such as EloquentORM and Artisan tools, suitable for rapid development and beginners. 2.Yii emphasizes performance and efficiency, is suitable for high-load applications, and provides efficient ActiveRecord and cache systems, but has a steep learning curve.

How to uninstall MySQL and clean residual files Apr 29, 2025 pm 04:03 PM

To safely and thoroughly uninstall MySQL and clean all residual files, follow the following steps: 1. Stop MySQL service; 2. Uninstall MySQL packages; 3. Clean configuration files and data directories; 4. Verify that the uninstallation is thorough.

Quantitative Exchange Ranking 2025 Top 10 Recommendations for Digital Currency Quantitative Trading APPs Apr 30, 2025 pm 07:24 PM

The built-in quantization tools on the exchange include: 1. Binance: Provides Binance Futures quantitative module, low handling fees, and supports AI-assisted transactions. 2. OKX (Ouyi): Supports multi-account management and intelligent order routing, and provides institutional-level risk control. The independent quantitative strategy platforms include: 3. 3Commas: drag-and-drop strategy generator, suitable for multi-platform hedging arbitrage. 4. Quadency: Professional-level algorithm strategy library, supporting customized risk thresholds. 5. Pionex: Built-in 16 preset strategy, low transaction fee. Vertical domain tools include: 6. Cryptohopper: cloud-based quantitative platform, supporting 150 technical indicators. 7. Bitsgap:

Steps to add and delete fields to MySQL tables Apr 29, 2025 pm 04:15 PM

In MySQL, add fields using ALTERTABLEtable_nameADDCOLUMNnew_columnVARCHAR(255)AFTERexisting_column, delete fields using ALTERTABLEtable_nameDROPCOLUMNcolumn_to_drop. When adding fields, you need to specify a location to optimize query performance and data structure; before deleting fields, you need to confirm that the operation is irreversible; modifying table structure using online DDL, backup data, test environment, and low-load time periods is performance optimization and best practice.

How to use MySQL functions for data processing and calculation Apr 29, 2025 pm 04:21 PM

MySQL functions can be used for data processing and calculation. 1. Basic usage includes string processing, date calculation and mathematical operations. 2. Advanced usage involves combining multiple functions to implement complex operations. 3. Performance optimization requires avoiding the use of functions in the WHERE clause and using GROUPBY and temporary tables.

Laravel logs and error monitoring: Sentry and Bugsnag integration Apr 30, 2025 pm 02:39 PM

Integrating Sentry and Bugsnag in Laravel can improve application stability and performance. 1. Add SentrySDK in composer.json. 2. Add Sentry service provider in config/app.php. 3. Configure SentryDSN in the .env file. 4. Add Sentry error report in App\Exceptions\Handler.php. 5. Use Sentry to catch and report exceptions and add additional context information. 6. Add Bugsnag error report in App\Exceptions\Handler.php. 7. Use Bugsnag monitoring

How to rename a database in MySQL Apr 29, 2025 pm 04:00 PM

Renaming a database in MySQL requires indirect methods. The steps are as follows: 1. Create a new database; 2. Use mysqldump to export the old database; 3. Import the data into the new database; 4. Delete the old database.

See all articles