reactjs - React-Localization setLanguage() sayfayı güncellemiyor

Ne başarmaya çalışıyorum

Şu anda mevcut React-Native projemiz içinde yerelleştirme uygulamaya çalışıyorum.

Bunu yapmak için, aşağıdaki paketi seçiyorum: React-Localization

Projemiz, TypeScript ile birlikte React-Native kullanılmasını içeriyor.

Sorun nedir

Dili “en” den “nl” ye ayarlamak için bir fonksiyon yazdım.

O zaman iki sayfam var:

• Ana Sayfa (dili değiştirme işlevini içerir ve bir Metin öğesine sahiptir)
• Ayarlar (bir Metin öğesi içerir)

Yalnızca Ana Sayfa'daki metin güncelleniyor. Ayarlar sayfasındaki metin öğesi çevrilmiyor. Ayrıca başlık ve alt gezinmem de çevrilmiyor.

Hangi kodu kullanıyorum

Dili değiştirmek için

    switchLanguage() {
        if (translationStrings.getLanguage().toLowerCase() == 'nl') {
            translationStrings.setLanguage('en');
        } else {
            translationStrings.setLanguage('nl');
        }
        this.setState({});
    }

Çeviriler

export const translationStrings = new LocalizedStrings({
    en: {
        tempTest: "English test one",
        tempTest2: "English test two"
    },
    nl: {
        tempTest: "Dutch test een",
        tempTest2: "Dutch test twee"
    }
});

Çeviri yapmaya çalıştığım öğelerin örnekleri.

// This is on the home page so it works.
                <Text>
                    {translationStrings.tempTest}
                </Text>

// This is on the settings page and it does not work.
                <Text>
                    {translationStrings.tempTest2}
                </Text>

Ayrıca, üstbilgi ve alt navigasyon güncellenmiyor/çevirilmiyor.

Biri bana tam olarak neyi yanlış yaptığımı anlayabilmem için biraz fikir verebilir mi?

Sanki uygulamaya her şeyin çevrildiğine dair bir işaret vermem ve yeniden yüklemesi ya da bir şey yapması gerektiğini göstermem gerekiyor gibi hissediyorum.

Cevap #1

Diğer sayfalar için içeriği çevirmek amacıyla React Redux kullandım.

Alt gezginimi, gezinme seçenekleri için aşağıdaki değişiklikleri yaparak çevirmeyi başardım.

Eski ->

Settings: {
      screen: Settings,
      navigationOptions: {
        tabBarLabel: i18next.t('Settings')
      },
    },

Yeni -->

Settings: {
      screen: Settings,
        navigationOptions: ({ navigation, navigationOptions }) => ({
        tabBarLabel: i18next.t('Settings')
      }),
    },