Question

我使用了一个名为react-native-localization的库来翻译我的应用程序。除Drawer Navigator和Bottom Tab Navigator标题外的所有内容都将被翻译。

尝试了不同的方法。但是，当我在寻找解决方案时，我碰到这种说法，navigationOption不会重新呈现更改，因此您应该返回title值来修复它。以下是我的代码片段。

  changeLangFa() {
        const lan = 'fa';
        saveSettings(lan); 
        RNRestart.Restart();
    }

    changeLangEn() {
        const lan = 'en';
        saveSettings(lan);
        RNRestart.Restart();
    }

...

 async componentWillMount() {
        const lan = await loadSettings();
        strings.setLanguage(lan);
    }

.....

const AppDrawerNavigator = createDrawerNavigator({
    AppTabNavigator: {
        screen: AppTabNavigator,
        navigationOptions: ({
            title: strings.settingsPage.settingsTitle,
            drawerIcon: () => (
                <Icon name="cogs" size={22} />
            )
        })
    },
    AboutUs: {
        screen: AboutUs,
        navigationOptions: ({
            title: strings.aboutUsPage.aboutUstitle,
            drawerIcon: () => (
                <Icon name="info-circle" size={23} />
            )
        })
    },

前两个功能用于保存所需的语言并进行更改，并将它们绑定到某些按钮。代码的第二部分是在App.js文件中加载语言配置的位置。最后是我的导航器配置（其中一些）。那我做错什么了吗？如果是，请纠正我，如果否，是否可以更改NavigationNavigator的修复方式，以便动态地重新呈现更改？如果是，请指出如何操作。

Answer 1

在index.js中进行设置并相应地使用。

index.js


let strings = new LocalizedStrings({
 en:{
   title:"How do you want your egg today?",
   boiledEgg:"Boiled egg",
   softBoiledEgg:"Soft-boiled egg",
   choice:"How to choose the egg"
 },
 fa: {
   title:"Come vuoi il tuo uovo oggi?",
   boiledEgg:"Uovo sodo",
   softBoiledEgg:"Uovo alla coque",
   choice:"Come scegliere l'uovo"
 }
});

...
componentDidmount() {
 strings.setLanguage('fa'); // When the local value of the user's mobile phone is 'fa'
}

AboutUs.js

  static navigationOptions = {
    title:{strings.title},
  };

  /* render function, etc */
}

Answer 2

借助hong开发和修改它的答案，我能够解决问题并制作一个动态的NavigationOptions。正确的代码段如下：

AboutUs.js

static navigationOptions = () => ({
      title: strings.aboutUsPage.aboutUstitle
    })

如何动态更改DrawerNavigator的navigationOption（标题）？

2 个答案: