[React Native] 언어 변경

 

언어 변경하는 것에는 여러가지 방법이 있는데...

아주 간단하게 i18n-js 라이브러리를 쓰는 것이다.

이것을 사용하면 현재 사용되는 언어를 가져올 수도 있고, 언어를 아주 손쉽게 바꿀 수도 있다.

I18n.locale = 'ko' // 한국어로 변경
deviceLanguage = I18n.currentLocale(); // 현재 언어 출력 

root폴더에 i18n이라는 폴더를 만들고 index.js를 만들었다.

<index.js>

import i18n from 'i18n-js';
import { I18nManager } from 'react-native';
import * as RNLocalize from 'react-native-localize';

import en from './locales/en'; 
import ko from './locales/ko';


i18n.translations = {
	en,
	ko
};
i18n.fallbacks = true;

const defaultLanguage = { languageTag: 'en', isRTL: false }; 
const availableLanguages = Object.keys(i18n.translations);

i18n.locale = languageTag;

export default i18n;

<ko.js>
export default {
Language: '언어'
}

<en.js>
export default {
Language: 'Language'
}

자, 그럼 버튼의 Text를 Language로 세팅을 해 보자.

<Text adjustsFontSizeToFit
              numberOfLines={1}
              style={{
                fontSize: 35,
                textAlign: "center",
                color:'black',
              }}>{I18n.t('Language')}</Text>

I18n.t('Lanuage') 이게 다다. 이렇게 하면 알아서 언어가 변화하면 해당 선택된 언어의 Language를 가지고 오게 된다.

위의 index.js에서 나는 디폴트 언어를 영어로 선택했다.

그럼 View를 눌렀을 때 언어를 ko로 바꾸게 해보자.

<View style={styles.bt2}>
	<TouchableOpacity onPress={() => this.changeLanguage('ko', this)}>
		<Text style={{
		fontSize: 28,
		textAlignVertical: "center",
		textAlign: "center",
		color:'black'}}>Korean</Text>
	</TouchableOpacity>
</View>

View를 눌렀을 때 changeLauage에 설정할 언어와 component를 매개변수로 보내 준다.

componet를 보내 주는 이유는 아래에서 설명하도록 하겠다. (매우 중요)

changeLanguage = (language, component) => {
     I18n.locale = language;
     component.forceUpdate();
}

해당 언어로 변경한후에 우리는 변경된 부분만 새로 렌더링해야 한다.

이것을 쓰기 위해서는 setStatus()를 쓰는 것이 아주 바람직하다.

하지만 나는... 더 쉬운 방법을 선택하도록 하겠다.

forceUpdate는 강제적인 면이 있어서 추천하지는 않겠지만...

나는 일단 잘 동작함으로 문제가 없을 것 같다.