6

我在我的 Expo 应用程序中实例化 I18n 时遇到问题。问题的 TL;DR 是需要翻译的组件是在之前渲染的

Expo.Util.getLocaleAsync()

返回并设置语言环境。我不知道如何最好地设置它。到目前为止，我有一个 I18n 实例的文件，然后我将其导入并在我的应用程序的其他任何地方使用。它看起来像这样：

import Expo from 'expo';
import I18n from 'i18n-js';
import english from './resources/strings/en';
import danish from './resources/strings/da';

I18n.defaultLocale = 'en-GB';
I18n.fallbacks = true;

I18n.initAsync = async () => {
  var locale = 'en-GB';
  try {
    locale = await Expo.Util.getCurrentLocaleAsync();
  } catch (error) {
    console.log('Error getting locale: ' + error);
  }

  I18n.locale = locale ? locale.replace(/_/, '-') : '';
};

I18n.translations = {
  en: english,
  da: danish,
};

export default I18n;

然后，在我的根应用程序组件中，我执行以下操作：

从'./src/i18n'导入I18n；

class App extends React.Component {
  async componentWillMount() {
    console.log('Current locale (main1): ' + I18n.currentLocale());
    try {
      await I18n.initAsync();
    } catch (error) {
      console.log('Error setting locale ' + error);
    }

    console.log('Current locale (main2): ' + I18n.currentLocale());
  }

  render() {
    return <AppContainer />;
  }
}

Expo.registerRootComponent(App);

日志说明了预期值——首先是默认语言环境，然后是 main2 中的更新语言环境。问题是在进行更改之前，子视图是使用第一个语言环境呈现的，我不明白为什么？

我想不出更好的方法来做到这一点，任何想法/提示将不胜感激:-)

4

3 回答 3

3

这对我有用：

在main.js：

import I18n from 'react-native-i18n';

class App extends React.Component {
  state = {
    appIsReady: false,
  }

  async componentWillMount() {
    await I18n.initAsync();
    this.setState({appIsReady: true});
  }

  render() {
    if (!this.state.appIsReady) {
      return (
          <AppLoading />
      );
    }
    return ( 
      <RootComponent>
    );
  )

在某些组件中：

import I18n from '../i18n';

  render() {
    return (
         <View>
           <Text>{I18n.t('favorites')}</Text>
           <Text>{I18n.locale}</Text>
         </View>
    )
  }

从我创建的根目录i18n/index.js：

import I18n from 'react-native-i18n';

I18n.fallbacks = true; // let 'en-GB' fallback to 'en' if not found
I18n.translations = {
  'en': require('./en.json'),
  'nl': require('./nl.json'),
}

export default I18n;

我最初的荷兰语翻译文件在i18n/nl.json：

{
  favorites: 'Jouw Favorieten',
}

我有这个package.json：

"react-native-i18n": "git+https://github.com/xcarpentier/ex-react-native-i18n.git",
于 2017-06-19T12:39:27.023 回答
1

这可能是您的解决方案：https ://github.com/xcarpentier/ex-react-native-i18n

于 2017-05-18T13:39:45.617 回答
1

在 react native expo 中很容易。

1- 步骤 1安装和导入

expo install expo-localization

应用程序.js

import { I18nManager } from 'react-native';
    import * as Localization from 'expo-localization';
    import i18n from 'i18n-js';

1- 步骤 2 创建一个支持语言的对象。

i18n.translations = {
  en: { addPrice: 'add Price Here',subTax:' Sub Tax -'},
 ar: {addPrice: 'ادخل السعر هنا' ,subTax:'قبل ضريبة - '}
};

// Set the locale once at the starting app.

i18n.locale = Localization.locale;

// When a value is missing from a language it'll fallback to another language with the key present.

i18n.fallbacks = true;

//don't change app dir to rtl. 
I18nManager.forceRTL(false);
I18nManager.allowRTL(false);

1- step 3 在任何地方使用它

<TouchableOpacity >

<Text >{i18n.t('subTax')}</Text>

</TouchableOpacity>
于 2020-07-26T05:07:04.283 回答