Как добавить drawerIcon в навигатор ящика, который содержит вложенный навигатор стека?

У меня есть навигатор стека, который затем вкладывается в навигатор ящика. Я хочу иметь значок для каждого маршрута в навигаторе стека, который затем будет отображаться в меню ящика.

Я попытался использовать 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,
  }
);

При использовании этого способа значки не применяются. Возможно, потому что в навигаторе стека нет опции drawerIcon? Но тогда я могу применить их к каждому маршруту индивидуально ...


react-native navigation-drawer stack-navigator react-native-navigation react-navigation-stack
person PJately    schedule 06.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если у вас есть два пути,

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}
          />
        );
      }
    })
  }
person hong developer    schedule 06.08.2019
comment
1) Опять же, это относится только к значку для одного маршрута в меню ящика. Я хотел бы, чтобы оба варианта маршрута (настройка и домой) отображались в панели навигации с их собственными значками. 2) Мои маршруты явно не определены в навигаторе ящиков, иначе у меня не было бы проблем. Вместо этого навигатор стека вложен в мою панель навигации ящика. - person PJately; 07.08.2019
comment
Как вы можете видеть, снова посмотрев на мой код, я возвращаю значок на свой путь. Если вам нравится мой код, вы можете получить значки на главном экране и на экране настроек. - person hong developer; 07.08.2019
comment
Если я не вложу stacknavigator, я могу найти более чистое решение, представленное Понлеу. Тем не менее, я ищу решение, которое позволит мне продолжать использовать мою вложенную stacknav в моем drawernav. - person PJately; 08.08.2019
comment
@PJately Если вы воспользуетесь ответом Понлеу, вам придется создать много файлов и создать код. В этом нет необходимости. Причина, по которой вы не можете решить эту проблему с помощью того, что хотите, заключается в том, что вы не можете прочитать экранное значение стека из текущего модуля. - person hong developer; 08.08.2019
comment
1) В вашем решении не используется вложенная StackNavigation. 2) Если бы я решил не вкладывать stackNavigator, то для ответа Понлеу потребовалось бы меньше кода, и его было бы легче читать. Однако у меня есть вложенный stackNavigator в моем drawerNav, поэтому ваше решение не сработает для этого. - person PJately; 08.08.2019
comment
@PJately Если вы добавили код, похожий на мой ответ, вы можете удалить тот же экран в навигаторе стека и добавить навигатор ящика. - person hong developer; 08.08.2019