javascript - 如何动态更改 DrawerNavigator 的导航选项(标题)？

Question

我使用了一个名为 react-native-localization 的库来翻译我的应用程序。除抽屉导航器和底部选项卡导航器的标题外的所有内容都将被翻译。

尝试了不同的方法。但是当我在寻找解决方案时，我遇到了这样的说法，即 navigationOption 不会重新呈现更改，您应该返回标题值来修复它。下面是我的代码的一些片段。

  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} />
            )
        })
    },

前两个函数用于保存所需的语言并更改它，这些函数绑定(bind)到一些按钮。代码的第二部分是在 App.js 文件中加载语言配置的地方。最后一个是我的导航器配置(其中一些)。那我做错了什么吗？如果是，请纠正我，如果不是，是否可以修复以某种方式更改 navigationOption 以动态重新呈现更改？如果是，请指出如何做。

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 */
}