如何将drawerIcon添加到包含嵌套堆栈导航器的抽屉导航器？

Question

我有一个堆栈导航器，然后嵌套在抽屉导航器中。我希望堆栈导航器中的每个路由都有一个图标，然后显示在抽屉菜单中。

我尝试使用 navigationOptions 在堆栈导航器中为每条路线提供一个抽屉图标，但这不起作用。

const StackNavigation = createStackNavigator(
  {
    Setting: {
      screen: SettingScreen,
      navigationOptions: {
        drawerIcon: ({ tintColor }) => <Feather name="settings" style={{ fontSize: 24, color: tintColor }} />,
      },
    },
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        drawerIcon: ({ tintColor }) => <Feather name="home" style={{ fontSize: 24, color: tintColor }} />,
      },
    },
  },
  {
    initialRouteName: 'Home',
    headerMode: Platform.OS === 'android' ? 'screen' : 'float',
    defaultNavigationOptions: ({ navigation }) => ({
      headerLeft: <MenuButton navigation={navigation} />,
    }),
  }
);

const MainNavigation = createDrawerNavigator(
  {
    Home: {
      screen: StackNavigation,
    },
  },
  {
    contentComponent: CustomDrawerComponent,
  }
);

以这种方式尝试时不会应用任何图标。可能是因为堆栈导航器没有抽屉图标选项？但是我如何将它们分别应用于每条路线......

Answer 1

如果你有两条路径，

import Icon from 'react-native-vector-icons/FontAwesome';
...
const MainTab = createDrawerNavigator(
  {
    Home: {
      screen: HomeScreen
    },
    Setting: {
      screen: SettingScreen
    }
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      drawerIcon: ({ focused, horizontal, tintColor, image }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "Home") {
          iconName = "home";
        } else if (routeName === "Setting") {
          iconName = "rocket";
        }
        return (
          <Icon
            name={iconName}
            size={horizontal ? 20 : 25}
          />
        );
      }
    })
  }