在反应本机应用程序中使用多种语言

Question

我有一个反应本机应用程序，我正在为公司构建项目。该公司希望提供选择设置语言的选项，然后根据需要从设置页面更改它，与 android 上的 phone 语言的工作方式相同。

我首先考虑将文本保存在 JSON 文件中，然后在应用程序启动时从那里加载文本，当我进行搜索时，我只找到了有关本地化的解决方案，而不是像我那样使用多种语言正在做。

所以我想知道是否有人可以确认我想到的 JSON 文件解决方案是一个很好且有用的想法，是否有其他更好的解决方案可以代替？

Answer 1

在react native中有很多解决方案。一种方法是使用 i18n 结合本地化 JSON 文件来创建多语言解决方案。

实践中的例子：

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

import { strings } from '../locales/i18n';

class Screen extends Component {
  render() {
    return (
      <View>
        <Text>{strings('screenName.textName')}</Text>
      </View>
    );
  }
}

完整说明：https://medium.com/@danielsternlicht/adding-localization-i18n-g11n-to-a-react-native-project-with-rtl-support-223f39a8e6f2

Answer 2

项目 react-native-i18n is deprecated now. Read this article Internationalization in React Native 除了这个小配置外不需要任何链接或任何配置。

import i18n from 'i18n-js';

import en from './locales/en.json';
import de from './locales/de.json';

i18n.defaultLocale = 'en';
i18n.locale = 'en';
i18n.fallbacks = true;
i18n.translations = { en, de };

export default i18n;

要在页面上显示国际化信息，我们可以使用 i18n.t() 函数，将翻译键作为参数传递。例如i18n.t("home.welcome")

Answer 3

在 React Native 应用程序中使用多语言（印地语、英语）

先创建2个json文件 主文件夹...语言 1..hi.json

{
name:'Name'
Address:'Address'
}

2..en.json

{
name:'नाम'
Address:'पता'
}

3.then 安装这个... i18n

4..创建文件i18n.js

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import en from '../Language/en.json';
import hi from '../Language/hi.json';

i18n.use(initReactI18next).init({
lng: 'en',
fallbackLng: 'en',
resources: {
    en: en,
    hi: hi,
},
interpolation: {
    escapeValue: false
}
});

export default i18n;

5...App.js 导入此行

import   './Language/i18n';
import {useTranslation} from 'react-i18next';

6...App.js代码

 function HomeScreen() {
      const {t,i18n} = useTranslation();
      const [currentLanguage,setLanguage] =useState('en');
      const changeLanguage = value => {
        i18n
          .changeLanguage(value)
          .then(() => setLanguage(value))
          .catch(err => console.log(err));
      };
      return (

        <View style={{flex:1,backgroundColor:'#ccc'}}>          
               <Text>{t("name")}</Text>
        <View>
              <TouchableOpacity onPress={()=>changeLanguage('en')}>
                  <Text>  ENGLISH</Text>
               </TouchableOpacity>

               <TouchableOpacity onPress={()=>changeLanguage('hi')}>
                     <Text>हिन्दी</Text>
                </TouchableOpacity>
             </View> 
     </View>
      );
    }
export default HomeScreen;

在反应本机应用程序中使用多种语言

using multiple languages in a react native app

react-native

multilingual