web-dev-qa-db-fra.com

Réagir Navigation lors du changement d'onglet

Sans utiliser Redux, comment détecter un changement d’onglet avec un navigateur d’onglet de navigation? 

Je sais que je dois utiliser onNavigationStateChange d'une manière ou d'une autre, mais je ne vois pas comment mettre à jour la vue actuelle. 

export default () => <MyTabNav
    ref={(ref) => { this.nav = ref; }}
    onNavigationStateChange={(prevState, currentState) => {
        //call function on current view
    }}
/>;
react-nativereact-navigation
6
TJ Gillis
export default () => <MyTabNav
    ref={(ref) => { this.nav = ref; }}
    onNavigationStateChange={(prevState, currentState) => {
       const getCurrentRouteName = (navigationState) => {
         if (!navigationState) return null;
         const route = navigationState.routes[navigationState.index];
         if (route.routes) return getCurrentRouteName(route);
         return route.routeName;
       };
    global.currentRoute = getCurrentRouteName(currentState);
  }}
/>;

Si vous ne souhaitez pas utiliser redux, voici comment vous pouvez stocker des informations globales sur la route en cours. Vous pouvez ainsi détecter un changement d’onglet et indiquer quel onglet est maintenant actif.

5
bumbur

En fait, vous pouvez ajouter un auditeur spécial dans votre composant

componentDidMount () {
    this.props.navigation.addListener('willFocus', (route) => { //tab changed });
}
19
OsDev

Il y a de longues discussions à ce sujet depuis le numéro réact-native 314 , 486 , 1335 , et enfin, nous avons une meilleure manière de gérer cela, après le 27 septembre 2017, react- version de navigation v1.0.0-beta.13 :

Nouvelles fonctionnalités

Accepter un paramètre tabBarOnPress (# 1335) - @cooperka

Utilisation: 

const MyTabs = TabNavigator({
  ...
}, {
  tabBarComponent: TabBarBottom /* or TabBarTop */,
  tabBarPosition: 'bottom' /* or 'top' */,
  navigationOptions: ({ navigation }) => ({
    tabBarOnPress: (scene, jumpToIndex) => {
      console.log('onPress:', scene.route);
      jumpToIndex(scene.index);
    },
  }),
});
2
Val