reactjs - 使用 DrawerNavigator 和 BottomTabNavigator 如何放置 DrawerIcon

Question

我将我的主菜单与 DrawerNavigator 一起使用。在屏幕内，我使用 BottomTabNavigator。

我把每个屏幕的 DrawerIcon 是这样的：

....
export default class HomeScreen extends React.Component {
...

static navigationOptions = {
    drawerIcon: ({ tintColor }) => (
      <Icon name="home" style={{ fontSize: 24, color: tintColor }} />
    )
  }

...

}

但是，在我使用 TabNavigator 的屏幕中，我没有导出类，而是导出 createBottomNavigator，如下所示：

class MetasSemanaAnterior extends React.Component {...}

class MetasScreen extends React.Component {...}

export default createBottomTabNavigator({
    MetasMain: MetasScreen,
    MetasAnterior: MetasSemanaAnterior,
});

我不知道DrawerNavigator 的navigationOptions 放在哪里！

请帮忙！泰

Answer 1

不确定这是否是您要查找的内容，但如果我理解正确，您可以尝试一下。您可以参考https://reactnavigation.org/docs/en/navigation-options-resolution.html以了解有意义的事情。

const tabNavigator = createBottomTabNavigator({
    MetasMain: MetasScreen,
    MetasAnterior: MetasSemanaAnterior,
});

tabNavigator.navigationOptions = () => {

}

export default tabNavigator;

Answer 2

我以这种方式解决了：

在创建抽屉导航的主屏幕中，我设置了 DrawerIcon。因此，尽管我没有在子屏幕中设置它，但该图标仍会出现

在创建 DrawerMenu 的位置设置 DrawerIcon：

    const AppDrawerNavigator = createDrawerNavigator({
      ChatBot: {
        screen: HomeScreen
      },
      Profile: {
        screen: ProfileScreen
      },
      METAS: {
        screen: MetasScreen,
        navigationOptions: {
//here i set the drawerIcon
          drawerIcon: ({ tintColor }) => { return (<Icon name="flag" style={{ fontSize: 24 }} />) }
        }
      }
    }