react-native : multi language support set up, use device locale, react-native-i18n use example

Multi language prepare

.\app\i18n\locales\en.js
export default {
  wcsqa: 'Westminster Shorter Catechism Q&A'
};
.\app\i18n\locales\zh.js
export default {
  wcsqa: '威斯敏斯德小要理问答'
};
.\app\i18n\i18n.js
import I18n from 'react-native-i18n';
import en from './locales/en';
import zh from './locales/zh';

I18n.fallbacks = true;

I18n.translations = {
  en,
  zh
};

export default I18n;

Usage

App.js
import ReactNativeLanguages from 'react-native-languages';
import I18n from './app/i18n/i18n'

ReactNativeLanguages.addEventListener('change', ({ language }) => {
  I18n.locale = language;
});

render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.title}>
            {I18n.t('wcsqa')}
          </Text>
          ... // other contents
        </View>
        ... // other contents
      </View>
    )
}

No Image, No Truth

multi-language

Refers

https://github.com/react-community/react-native-languages
https://github.com/AlexanderZaytsev/react-native-i18n
https://errong.win/language-code-for-chinese-should-be-start-with-zh/

Comments

Popular posts from this blog

How to fix error : no module named sendgrid when try to use sendgrid python lib in PHP.

react-native run-android : sun.security.provider.cert path.SunCertPathBuilderException : unable to find valid certification path to req uested target

react-native run-android : do not build/update modified code(App.js)