Navigation arrière personnalisée pour le bouton de retour de navigation

Question

Comment puis-je donner une navigation personnalisée à la flèche arrière de l'en-tête dans ReactNavigation? Je souhaite que la flèche de retour dans l'en-tête navigue vers l'écran que je définis et non vers l'écran précédent.

Merci.

Answer 1

Vous pouvez essayer 2 choses:

a) utilisez headerMode: 'none' dans ton sub-StackRouters au lieu de votre routeur racine (nommé RouterComponent). Idéalement, vous ne devriez rien faire de plus alors et les en-têtes des sub-StackRouters serait affiché dans l'en-tête de votre routeur racine. Je pense que je me souviens de quelque chose de similaire qui a fonctionné pour moi il y a quelque temps, mais je ne l'ai pas testé depuis longtemps et je pense qu'il est peu probable que cela fonctionne toujours comme ça, mais vous pouvez néanmoins le tester.

b) et c'est ce que j'utilise actuellement dans une situation différente. Pour inclure manuellement le bouton de retour:

import { HeaderBackButton } from 'react-navigation';

const navigationOptions = ({ navigation }) => ({
    headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)} />,
})

const RouterComponent = StackNavigator({
    Tabs: {
        screen: Tabs
    },
    Profile: {
        screen: ProfileStack,
        navigationOptions
    }
},{
    mode: 'modal',
    headerMode: 'none',
});

Si la solution ci-dessus ne fonctionne pas,

Essayez d'ajouter des options de navigation directement à la définition ProfileStack.

const ProfileStack = StackNavigator({
    ProfileHome: { 
      screen: ProfileHome, 
      navigationOptions: ({navigation}) => ({ //don't forget parentheses around the object notation
        title: 'Profile',
        headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)} />
      })
    },
    ProfileEdit: { screen: ProfileEdit }
  }