如何在包含嵌套堆栈导航器的抽屉导航器中添加Drawericon

Question

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

我试图使用导航措施为每条路线提供堆栈导航器中的抽屉图标，但这不起作用。

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,
  }
);

尝试这种方式时没有图标。可能是因为Stack Navigator没有Drawericon选项？但是然后我如何将它们分别应用于每个路线...

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