react-native-i18n在Android上不生效(Reload和简繁体)的解决方案

react-native-i18n在Android上不更新和不识别的解决方案

添加 react-native-i18n 的依赖

• 添加依赖

  using yarn:     yarn add react-native-i18n
  using npm:      npm install react-native-i18n --save

• native配置(auto)

  react-native link

• native配置(manual)。请参考github中ReadMe详细配置。

• 本文主要解决rn-i18n在Android手机上出现的两个bug。

  * 不更新 · 切换系统语言后，引用了rn-i18n的应用内语言并没有随之改变。
  * 不识别 · 部分国外机型无法识别多语言或简繁体，修改系统语言后reload仍然显示为英文。

不更新的解决方案

（不更新的原因是Android-App在系统语言更改后没有reload）

• 给 AndroidManifest.xml 里的 MainActivity 添加configChanges属性，

  需要加入 layoutDirection 和 locale 的标签。

  <application>
      <activity
          android:name=".MainActivity"
          android:configChanges="keyboard|keyboardHidden|
          orientation|screenSize|layoutDirection|locale"
          >
      ...
      </activity>
  </application>

• 在 MainActivity 里重写 onConfigurationChanged 方法。

  public class MainActivity extends ReactActivity {
  
      private String mCurrentLocale;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          mCurrentLocale = getResources().getConfiguration().locale.toString();
      }
  
      /**
      * Android手机在改变系统语言后，rn-i18n多语言不跟随变化，
      * 故在此强制reload，使文案重新加载。
      */
      @Override
      public void onConfigurationChanged(Configuration newConfig) {
          super.onConfigurationChanged(newConfig);
  
          String locale = newConfig.locale.toString();
          if (!mCurrentLocale.equals(locale)) {
              mCurrentLocale = locale;
              final ReactInstanceManager instanceManager = getReactInstanceManager();
              instanceManager.recreateReactContextInBackground();
          }
      }
  }

不识别的解决方案

（不识别的原因是国内外机型对多语言配置时的识别key不同）

• 添加不同的文件以区分各个语言文案

  • src/i18n/locales/en.ts – 英文

    export default {
        TestString: 'English'
    }

  • src/i18n/locales/fr.ts – 法文

    export default {
        TestString: 'French'
    }

  • src/i18n/locales/ru.ts – 俄文

    export default {
        TestString: 'Russian'
    }

  • src/i18n/locales/zh-Hans.ts – 中文简体

    export default {
        TestString: '汉语'
    }

  • src/i18n/locales/zh-Hant.ts – 中文繁体

    export default {
        TestString: '漢語'
    }

• 添加各个语言文件的注入（不识别的解决方案也在这里）

  • src/i18n/i18n.ts

    import I18n from 'react-native-i18n'
    import en from './locales/en'
    import fr from './locales/fr'
    import ru from './locales/ru'
    import zh_Hans from './locales/zh_Hans'
    import zh_Hant from './locales/zh_Hant'
    
    I18n.fallbacks = true
    
    /**
    * ！！！！！不识别的解决方案
    * 0. github的描述里对js文件没有添加key，对国外机型完全不生效。
    * 1. 国外机型不识别类似于'fr-FR'的key，而'fr'的key可以被所有机型识别，
    *    所以暂以类似'fr'的key标识非中文语言文案。
    * 2. 简繁体：由于中文存在简繁体，所以不能仅以'zh'做key。
    *    国产机型识别简繁体的key为'zh-CN'和'zh-HK'、'zh-TW'。
    *    国外机型识别简繁体的key为'zh-Hans'和'zh-Hant'。
    *    两种简繁体体识别的key不同，但目标翻译文件相同。
    */
    I18n.translations = {
        'en': en,
        'fr': fr,
        'ru': ru,
        'zh-CN': zh_Hans, // 国产机型-中国大陆
        'zh-HK': zh_Hant, // 国产机型-中国香港
        'zh-TW': zh_Hant, // 国产机型-中国台湾
        'zh-Hans': zh_Hans, // 国外机型-汉语简体
        'zh-Hant': zh_Hant  // 国外机型-汉语繁体
    }
    
    export default I18n
    

• 多语言文案的使用

  export class I18nTest extends Component {
      render() {
          return (
              <Text>{I18n.t('TestString')}</Text>
          )
      }
  }