React navigation 5 - 抽屉 - 使用本地化更新项目

问题描述

基于文档 you can create a custom drawer with react-navigation。

实现 i18n 并不困难。但我看到的是： 当我们更改 DrawerItem 时，CustomDrawerContent 中的 i18n.locale 会正确更新。 但是通过 Drawer.Navigator drawerContent 发送的所有其他内容都被冻结。基本上每个 Drawer.Screen 项目...

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      // DrawerItemList contains MyDrawer content.
      <DrawerItemList {...props} />
      <DrawerItem label={i18n.t('some.deFinition10')} onPress={() => alert(i18n.t('some.deFinition99')} /> // Label i18n string will update properly but not the Alert (minor issue).
    </DrawerContentScrollView>
  );
}

function MyDrawer() {
  return (
    <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="menu1" component={SomeComponent1} options={{ drawerLabel: i18n.t('some.deFinition1') }}     // Will not update drawerLabel
      <Drawer.Screen name="menu2" component={SomeComponent2} options={{ drawerLabel: i18n.t('some.deFinition2') }}     // Will not update drawerLabel    
    </Drawer.Navigator>
  );
}

在零食 here 上工作抽屉 + I18n 代码。

---

我的理解是：

• MyDrawer 被调用。
• 那么Drawer.Navigator drawerContent将使CustomDrawerContent接管MyDrawer。

所以整个事情现在处理如下：

-> CustomDrawerContent 具有 MyDrawer 作为子元素，而声明则相反。它看起来像一个 ourobouros。

我试图在类中重塑代码，认为它会更动态：没有成功。

---

那么问题是：如何在更改Drawer.Screen时使CustomDrawerContent中的i18n.locale元素正确更新？

解决方法

我遇到了同样的问题，我通过使用传递的 props 解决了这个问题。

props 有一个包含所有抽屉屏幕信息的“描述符”键。所以它看起来像这样。

{
   "descriptors": {
        "Drawer-1-some-code": {
            ....
            "options": {
                  "drawerLabel": "label"
                  ...
            }
        }
        ...
   }
}

因此您需要在此处调用 drawerLabel 上的 i18n.t。可以通过以下方式完成。

Object.keys(this.props.descriptors).forEach( key => {
   if('drawerLabel' in this.props.descriptors[key].options) {
        this.props.descriptors[key].options.drawerLabel = i18n.t(
          this.props.descriptors[key].options.drawerLabel,);
   }
});

你可以把它放在渲染函数的开头。