i18nextで多言語翻訳を実装する（React・Expo・React Native）

 # npm
npm install i18next --save
 
 # yarn
yarn add i18next

import i18next from 'i18next';
 
await i18next.init({
  lng: 'en',
  debug: true,
  resources: {
    en: {
      translation: {
        "key": "hello world"
      }
    }
  }
});
 
console.log(i18next.t('key'));

{
	"key": "value of key"
}

{
	"key": "키 값"
}

import i18next from 'i18next';
import translationEn from "./en-US.json";
import translationKo from "./ko-KR.json";
 
await i18next.init({
	lng: 'en', // 언어 설정은 여기서 변경
	debug: true, 
	resources: {
		en: {
			translation: translationEn
		},
		ko: {
			translation: translationKo
		}
	}
});
 
console.log(i18next.t('key')); // "value of key"
console.log(i18next.t('key', { lng: 'ko' })); // "키 값"

{
	"key": "value of key",
	"look": {
		"deep": "value of look deep"
	},
  "error": {
    "unspecific": "Something went wrong.",
    "404": "The page was not found."
  }
}

i18next.t('key'); // "value of key"
i18next.t('look.deep'); // "value of look deep"

i18next.t('notkey', 'default value to show'); // "default value to show"

// const error = '404';
i18next.t([`error.${error}`, 'error.unspecific']); // -> "The page was not found"
 
// const error = '502';
i18next.t([`error.${error}`, 'error.unspecific']); // -> "Something went wrong"

{
    "key": "{{what}} is {{how}}"
}

i18next.t('key', { what: 'i18next', how: 'great' });
// -> "i18next is great"

{
    "key": "I am {{author.name}}"
}

const author = { 
    name: 'Jan',
    github: 'jamuhl'
};
i18next.t('key', { author });
// -> "I am Jan"

{
	"intlNumber": "Some {{val, number}}",
	"intlNumberWithOptions": "Some {{val, number(minimumFractionDigits: 2)}}"
}

i18next.t('intlNumber', { val: 1000 });
// --> Some 1,000
i18next.t('intlNumber', { val: 1000.1, minimumFractionDigits: 3 });
// --> Some 1,000.100
i18next.t('intlNumber', { val: 1000.1, formatParams: { val: { minimumFractionDigits: 3 } } });
// --> Some 1,000.100
i18next.t('intlNumberWithOptions', { val: 2000 });
// --> Some 2,000.00
i18next.t('intlNumberWithOptions', { val: 2000, minimumFractionDigits: 3 });
// --> Some 2,000.000
 
// 다국어 설정
i18next.t('intlNumber', { val: 1000.1, lng: 'de' }); 
// or: i18next.t('intlNumber', { val: 1000.1, locale: 'de' });
i18next.t('intlNumber', { val: 1000.1, formatParams: { val: { lng: 'de' } } }); 
// or: i18next.t('intlNumber', { val: 1000.1, formatParams: { val: { locale: 'de' } } });

{
  "intlCurrencyWithOptionsSimplified": "The value is {{val, currency(USD)}}",
  "intlCurrencyWithOptions": "The value is {{val, currency(currency: USD)}}",
  "twoIntlCurrencyWithUniqueFormatOptions": "The value is {{localValue, currency}} or {{altValue, currency}}",
}

i18next.t('intlCurrencyWithOptionsSimplified', { val: 2000 });
// --> The value is $2,000.00
i18next.t('intlCurrencyWithOptions', { val: 2300 });
// --> The value is $2,300.00
i18next.t('twoIntlCurrencyWithUniqueFormatOptions',
	{
		localValue: 12345.67,
		altValue: 16543.21,
		formatParams: {
			localValue: { currency: 'USD', locale: 'en-US' },
			altValue: { currency: 'CAD', locale: 'fr-CA' },
		},
	},);
// --> The value is $12,345.67 or 16 543,21 $ CA

{
  "intlDateTime": "On the {{val, datetime}}", 
}
 

i18next.t('intlDateTime', { val: new Date(Date.UTC(2012, 11, 20, 3, 0, 0)) });
// --> On the 12/20/2012
i18next.t('intlDateTime',
  {
    val: new Date(Date.UTC(2012, 11, 20, 3, 0, 0)),
    formatParams: {
      val: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
    },
  });
// --> On the Thursday, December 20, 2012

{
  "intlList": "A list of {{val, list}}"
}

// JSON
i18next.t('intlList', { val: ['locize', 'i18next', 'awesomeness'] });
// --> A list of locize, i18next, and awesomeness

{
  "key_one": "item",
  "key_other": "items",
  "keyWithCount_one": "{{count}} item",
  "keyWithCount_other": "{{count}} items"
}

i18next.t('key', {count: 0}); // -> "items"
i18next.t('key', {count: 1}); // -> "item"
i18next.t('key', {count: 5}); // -> "items"
i18next.t('key', {count: 100}); // -> "items"
i18next.t('keyWithCount', {count: 0}); // -> "0 items"
i18next.t('keyWithCount', {count: 1}); // -> "1 item"
i18next.t('keyWithCount', {count: 5}); // -> "5 items"
i18next.t('keyWithCount', {count: 100}); // -> "100 items"

{
  "key_zero": "zero",
  "key_one": "singular",
  "key_two": "two",
  "key_few": "few",
  "key_many": "many",
  "key_other": "other"
}

i18next.t('key', {count: 0}); // -> "zero"
i18next.t('key', {count: 1}); // -> "singular"
i18next.t('key', {count: 2}); // -> "two"
i18next.t('key', {count: 3}); // -> "few"
i18next.t('key', {count: 4}); // -> "few"
i18next.t('key', {count: 5}); // -> "few"
i18next.t('key', {count: 11}); // -> "many"
i18next.t('key', {count: 99}); // -> "many"
i18next.t('key', {count: 100}); // -> "other"