如何在React Native Expo應用程序中集成i18n-js

我遇到了在我的世博會應用程序中實例化I18n的問題。問題的TL; DR是需要翻譯的組件在之前呈現如何在React Native Expo應用程序中集成i18n-js

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中更新的語言環境。問題是在做出更改之前，第一個語言環境呈現了子視圖，我不明白爲什麼？

我想不出更好的方式來做到這一點，任何想法/提示將非常:-)

來源

2017-05-16 jhm

後一些更多的搜索，似乎使componentWillMount（）一個同步並不一定等待等待返回，正如Flow爲我指示的那樣。請參閱此問題中的討論：https：//github.com/facebook/flow/issues/1803。這意味着這種策略是不可行的，否則就不得不做。如何，我還不知道:-) – jhm

理解，這可能是你的解決方案：https://github.com/xcarpentier/ex-react-native-i18n

來源

2017-05-18 13:39:45 MattyK14

嘿馬蒂，感謝您的建議:-)我確實發現了同樣的回購，但1.它幾乎使用相同的方法，因此會有同樣的問題，2。我不想爲我的項目使用分叉派生，而是想出如何更好地實現原始的，更好支持的項目。看看他在index.js中的代碼，他正在做同樣的事情AFAIK :-) – jhm

因此，你已經使你的'componentWillMount（）'異步，並且你調用'setLocale（）'之前等待？ – MattyK14

正確，更新了問題以顯示代碼的調用方式:-) – jhm

這是什麼工作我：

在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-19 12:39:27 raarts

如何在React Native Expo應用程序中集成i18n-js

回答

相關問題