使用 DrawerNavigator 和 BottomTabNavigator 如何放置 DrawerIcon答案

【问题标题】：USING DrawerNavigator AND BottomTabNavigator HOW TO PUT DrawerIcon使用 DrawerNavigator 和 BottomTabNavigator 如何放置 DrawerIcon
【发布时间】：2018-11-01 04:14:29
【问题描述】：

我正在使用带有 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 放在哪里了！

请帮忙！ TY

【问题讨论】：

标签： reactjs react-native navigation-drawer react-navigation react-native-tabnavigator

【解决方案1】：

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

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

tabNavigator.navigationOptions = () => {

}

export default tabNavigator;

【讨论】：

这可以用于导出 TAB 导航器选项，但我还需要导出抽屉导航选项。泰

【解决方案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 }} />) }
        }
      }
    }

【讨论】：