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

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

1 个答案: