如何从抽屉式导航器菜单导航到特定选项卡，本机反应

Question

从抽屉项目中按下时，我必须导航到特定选项卡。我进行了很多搜索，但找不到与我的问题有关的任何内容

我试图遵循此导航操作链接，但无法找到实现方法Navigate to specific tab from Drawer Navigator。

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”时，应在标签导航器中导航至“已接受”屏幕。当我在抽屉菜单上按“ Screen4”时，应在选项卡导航器中导航至“进行中”屏幕。当我在抽屉式菜单上按“ Screen5”时，应在选项卡导航器中导航至“已完成”屏幕。有什么办法可以实现呢？谢谢

Answer 1

您可以重载tabBarComponent。然后，您可以检查点击/单击了哪个选项卡，并为其分配一个navigate-呼叫。

示例：

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

Answer 2

大家好，我做了一些工作，发现了一个简单的解决方案，希望它对以后的任何人都有帮助。解决方案是通过“ 编写自定义抽屉组件并在contentComponent中提及“。

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


const CustomDrawerContentComponent = props => (
    <SafeAreaView style={{flex: 1}}>
      <ScrollView>
        <DrawerItems {...props} />

        <TouchableOpacity onPress={() => this.UpcomingNav(props)}>
            <View style={{flexDirection: 'row', paddingLeft: calcWidth(5), paddingTop: calcHeight(1)}}>
              <Image style={{height: 20, width: 21}} source={require('./images/calendar.png')} />
              <Text style={{fontWeight: 'normal', fontFamily: Fonts.LatoRegular, paddingLeft: calcWidth(10.5), color: 'black'}}>Upcoming Trip</Text>
            </View>
          </TouchableOpacity>

        <TouchableOpacity style={{paddingTop: calcHeight(2)}} onPress={() => this.AcceptedNav(props)}>
            <View style={{flexDirection: 'row', paddingLeft: calcWidth(5), paddingTop: calcHeight(1)}}>
              <Image style={{height: 22, width: 22}} source={require('./images/sticker.png')} />
              <Text style={{fontWeight: 'normal', fontFamily: Fonts.LatoRegular, paddingLeft: calcWidth(10.5), color: 'black'}}>Accepted Trip</Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity style={{paddingTop: calcHeight(2)}} onPress={() => this.OngoingNav(props)}>
            <View style={{flexDirection: 'row', paddingLeft: calcWidth(5), paddingTop: calcHeight(1)}}>
              <Image style={{height: 22, width: 22}} source={require('./images/navigator.png')} />
              <Text style={{fontWeight: 'normal', fontFamily: Fonts.LatoRegular, paddingLeft: calcWidth(10.5), color: 'black'}}>Ongoing Trip</Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity style={{paddingTop: calcHeight(2)}} onPress={() => this.CompletedNav(props)}>
            <View style={{flexDirection: 'row', paddingLeft: calcWidth(5), paddingTop: calcHeight(1)}}>
              <Image style={{height: 24, width: 20}} source={require('./images/checklist.png')} />
              <Text style={{fontWeight: 'normal', fontFamily: Fonts.LatoRegular, paddingLeft: calcWidth(10.5), color: 'black'}}>Completed Trip</Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity style={{paddingTop: calcHeight(2)}} onPress={() => this.logout(props)}>
            <View style={{flexDirection: 'row', paddingLeft: calcWidth(5), paddingTop: calcHeight(1)}}>
              <Image style={{height: 20, width: 20}} source={require('./images/logout.png')} />
              <Text style={{fontWeight: 'normal', fontFamily: Fonts.LatoRegular, paddingLeft: calcWidth(10.5), color: 'black'}}>Logout</Text>
            </View>
          </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
);

const DrawerNavigatorExample = createDrawerNavigator({
  Screen1: {
    screen: Screen1_StackNavigator,
    navigationOptions: {
      drawerLabel: () => null,
    },
  },
  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: () => null,
    },
  },
},{
    contentComponent: CustomDrawerContentComponent,
    contentOptions: {
      labelStyle: {
        fontFamily: Fonts.LatoRegular,
        fontWeight: 'normal'
      }
    },
  },
);