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

Question

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

我试图遵循这个 link 的导航操作，但无法找到如何实现它 .

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 ”时，它应该导航到选项卡导航器中的“ Ongoing ”屏幕。当我在抽屉菜单上按“Screen5”时，它应该导航到选项卡导航器中的“已完成”屏幕。有什么办法可以实现吗？谢谢

Answer 1

您可以重载 tabBarComponent。然后你可以检查哪个选项卡是 tapped/clicked，并为其分配一个 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);
        }
      }}
    />
    ),

Answer 2

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

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

UpcomingNav = (props) => {
  props.navigation.navigate('Upcoming')
}

AcceptedNav = (props) => {
  props.navigation.navigate('Accepted')
}

OngoingNav = (props) => {)
  props.navigation.navigate('Ongoing')
}

CompletedNav = (props) => {
  props.navigation.navigate('Completed')
}

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