comment naviguer vers un onglet particulier à partir d'un menu de navigateur de tiroir react native

Question

Je dois naviguer vers un onglet particulier lorsque j'appuie sur un élément du tiroir. J'ai beaucoup cherché mais je n'ai rien trouvé qui corresponde à mon problème.

J'ai essayé de suivre ce lien d'actions de navigation mais je n'ai pas trouvé comment le mettre en œuvre. Naviguer vers un onglet spécifique à partir du navigateur du tiroir .

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

Lorsque j'appuie sur " Screen3 " dans le menu du tiroir, l'écran " Accepté " doit apparaître dans le navigateur d'onglets. Lorsque j'appuie sur " Screen4 " dans le menu du tiroir, l'écran " En cours " doit apparaître dans le navigateur d'onglets. Lorsque j'appuie sur " Screen5 " dans le menu du tiroir, l'écran " Completed " doit apparaître dans le navigateur d'onglets. Y a-t-il un moyen d'y parvenir ? Merci de votre compréhension.

Answer 1

Vous pouvez surcharger votre tabBarComponent. Vous pouvez alors vérifier quel onglet a été tapé/cliqué, et assigner une valeur de navigate -Appeler à l'action.

Ejemplo:

    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

J'ai travaillé un peu et j'ai trouvé une solution simple, j'espère que cela aidera quelqu'un à l'avenir. La solution est par " écrire un composant tiroir personnalisé et le mentionner dans le 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'
      }
    },
  },
);