codeQ Blog

1. Cài đặt i18next và react-i18next

Đầu tiên bạn cài 2 package i18next và react-i18next vào, có thể sử dụng npm hoặc yarn

npm install react-i18next i18next
// hoặc
yarn add react-i18next i18next

2. Tạo 4 file cùng cấp: App.js, Component.js, en.json, vi.json

App.js . (Thường mặc định có trong app react-native nếu không dùng expo). Các bạn chỉnh lại như sau:

import type {Node} from 'react';
import React from 'react';
// App.js
import i18next from 'i18next';
import {I18nextProvider} from 'react-i18next';
import Component from './Component';
import common from './common.json';
import en from './en.json';
import vi from './vi.json';

i18next.init({
  interpolation: {escapeValue: false},
  lng: 'en', //default language
  resources: {
    en: {
      //name of language
      lang: en, //namespace
    },
    vi: {
      lang: vi,
    },
  },
});

const App: () => Node = () => {
  return (
    <I18nextProvider i18n={i18next}>
      <Component />
    </I18nextProvider>
  );
};

export default App;

Trong đó: i18next.init để tạo config cho đa ngôn ngữ, và I18nextProvider để đưa đa ngôn ngữ xuống các component con thông qua context API.

en.json: file ngôn ngữ tiếng anh

{
  "Menu" : {
    "Setting" : {
      "title" : "Setting"
    }
  }
}

vi.json: file ngôn ngữ tiếng việt

{
  "Menu" : {
    "Setting" : {
      "title" : "Cài đặt"
    }
  }
}

Component.js: file sử dụng đa ngôn ngữ

import React from 'react';
import {View, Text} from 'react-native';
import {useTranslation} from 'react-i18next';

const Component = () => {

  const language = 'en';
  const {t, i18n} = useTranslation('lang'); // lang là namespace lúc cài đặt ở file App.js
  if(i18n.language !== language){
    i18n.changeLanguage(language);
  }

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#17a2b8',
      }}>
      <Text style={{fontWeight: 'bold', fontSize: 25}}>
        {t(`Menu.Setting.title`)}
      </Text>
    </View>
  );
};
export default Component;

Ở đây mình dùng hook useTranslation để sử dụng translate. i18n.changeLanguage(language) để thay đổi ngôn ngữ. Ở đây mình tạo 1 ứng dụng demo đơn giản nên mình đăt changeLanguage ở đây để dễ test. Trong dự án chính của các bạn nên đặt lại ngôn ngữ lúc mới vào app hoặc khi cài đặt ngôn ngữ ở setting thì sẽ tốt hơn. Làm giống mình ở trên nó sẽ chạy nhiều lần không cần thiết.

Sau khi thêm 4 file bạn chạy app trên android. Bạn có thể thay đổi giá trị const language = 'en' thành const language = 'vi' để đổi ngôn ngữ thành tiếng việt.

Để xác định ngôn ngữ hiện tại của người dùng bạn có thể kết hợp với locize. Mình sẽ chia sẻ phần này ở một bài khác.

Chúc các bạn thành công!