как перейти к конкретной вкладке из меню навигатора ящика реагировать родной - PullRequest
Новая
       71

как перейти к конкретной вкладке из меню навигатора ящика реагировать родной

1 голос
/ 22 октября 2019

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

Я пытался перейти по этой ссылке действий навигации, но не смог найти способ ее реализации Перейдите на конкретную вкладку из Навигатора ящиков . 

const TabNavigator = createMaterialTopTabNavigator(
  {
    Upcoming: { screen: UpcomingScreen },
    Accepted: { screen: AcceptedScreen },
    Ongoing: { screen: OngoingScreen },
    Completed: { screen: CompletedScreen },
  },
);

const Screen1_StackNavigator = createStackNavigator({
  First: {
    screen: TabNavigator,
  },
});


const DrawerNavigatorExample = createDrawerNavigator({
  Screen1: {
      //Title
      screen: Screen1_StackNavigator,
      navigationOptions: {
        drawerLabel: 'Upcoming Trips',
        labelStyle: {
          fontFamily: Fonts.LatoLight,
          fontWeight: '200',
        },
        drawerIcon: () => (
        // <Icon name="align-center" size={20} color="#365888" />
        <Image style={{height: 20, width: 21}} source={require('./images/calendar.png')} />
      )
    },
  },
  Screen2: {
    //Title
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: () => null,
    },
  },
  Screen3: {
    //Title
    screen: Screen1_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Accepted Trips',
      labelStyle: {
        fontFamily: Fonts.LatoLight,
        fontWeight: '200',
      },
      drawerIcon: () => (
        // <Icon name="align-center" size={20} color="#365888" />
        <Image style={{height: 22, width: 22}} source={require('./images/sticker.png')} />
      )
    },
  },
  Screen4: {
    //Title
    screen: Screen1_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Ongoing Trips',
      labelStyle: {
        fontFamily: Fonts.LatoLight,
        fontWeight: 'normal'
      },
      drawerIcon: () => (
        // <Icon name="align-center" size={20} color="#365888" />
        <Image style={{height: 22, width: 22}} source={require('./images/navigator.png')} />
      )
    },
  },
  Screen5: {  
    //Title
    screen: Screen1_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Completed Trips',
      labelStyle: {
        fontFamily: Fonts.LatoLight,
        fontWeight: 'normal'
      },
      drawerIcon: () => (
        // <Icon name="align-center" size={20} color="#365888" />
        <Image style={{height: 24, width: 20}} source={require('./images/checklist.png')} />
      )
    },
  },
})

Когда я нажимаю "Screen3" в меню ящика, он должен перейти к экрану "Accepted" в навигаторе вкладок. Когда я нажимаю «Screen4» в меню ящика, он должен перейти к «Текущему» экрану в навигаторе вкладок. Когда я нажимаю «Screen5» в меню ящика, он должен перейти к экрану «Completed» в навигаторе вкладок. Есть ли способ добиться этого? Спасибо

1 Ответ

0 голосов
/ 23 октября 2019

Вы можете перегрузить вкладку BarComponent. Затем вы можете проверить, какая вкладка была нажата / нажата, и назначить ей navigate -Call.

Пример: 

    createAppContainer(createBottomTabNavigator({
    TAB_NEWS: {
    screen: NewsMenu,

      navigationOptions: {
        tabBarLabel: 'NEWS',
      },
    },
    TAB_MORE: {
        screen: MenuMenu,
        navigationOptions: {
          tabBarLabel: 'MEHR',
        },
      },
    ....
    tabBarComponent: ({ jumpToIndex, ...props }) => (
    <BottomTabBar
      {...props}
      jumpToIndex={(index) => {
        if (index === 2) {
          // This is the MORE-Tab-Button. Don't  switch to tab, but open the Modal
          props.navigation.navigate('Menu_Screen');
        } else {
          jumpToIndex(index);
        }
      }}
    />
    ),
...