使用 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 的屏幕中，我不导出 class，而是导出 createBottomNavigator，如下所示：

class MetasSemanaAnterior extends React.Component {...}

class MetasScreen extends React.Component {...}

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

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

请帮助！ TY

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

使用 DrawerNavigator 和 BottomTabNavigator 如何放置 DrawerIcon

USING DrawerNavigator AND BottomTabNavigator HOW TO PUT DrawerIcon

navigation-drawer

reactjs

react-native

react-navigation

react-native-tabnavigator