web-dev-qa-db-fra.com

Modification du bouton de retour avec React-Navigation sur un écran spécifique

J'utilise react-navigation comme bibliothèque de navigation, et je me demande comment changer le bouton "retour" (qui est ajouté automatiquement par react-navigation) fonctionnalité pour un écran spécifique?

Je veux dire qu'au lieu de faire un pas dans la pile d'écrans, je veux que ça fasse 2 pas en arrière dans la pile. ou faites-le manuellement en lui donnant un nom d'écran (encore une fois sur un seul composant).

merci.

reactjsreact-nativereact-navigation
6
greW

Vous pouvez remplacer le bouton de retour pour un écran spécifique avec navigationOptions de cet écran. Vous pouvez lire plus d'informations sur le remplacement du bouton de retour dans react-navigation documents

Exemple de documents

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
    headerRight: (
      <Button
        onPress={() => alert('This is a button!')}
        title="Info"
        color="#fff"
      />
    ),
  };
}

Remplacement du bouton de retour

Le bouton de retour sera rendu automatiquement dans un StackNavigator chaque fois qu'il sera possible pour l'utilisateur de revenir de son écran actuel - en d'autres termes, le bouton de retour sera rendu chaque fois qu'il y aura plus d'un écran dans la pile .

Généralement, c'est ce que vous voulez. Mais il est possible que dans certaines circonstances, vous souhaitiez personnaliser le bouton de retour plus que vous ne le pouvez via les options mentionnées ci-dessus, auquel cas vous pouvez spécifier un headerLeft, comme nous l'avons fait avec headerRight et remplacez complètement le bouton de retour.

5
bennygenel

Considérez que vous avez 3 écrans A, B, C respectivement. Ainsi, la fonctionnalité par défaut du bouton de retour dans StackNavigator est la suivante: - Si vous appuyez sur le bouton de retour sur l'écran C, cela vous amènera à l'écran précédent, c'est-à-dire l'écran B. -

import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
  return{
    headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('A')}}/>)
 }
}
15
Varun Gupta

Vous pouvez également le faire lors de la création du navigateur de pile. Mis à jour à partir de react-navigation v4.

import { createStackNavigator, HeaderBackButton } from "react-navigation-stack";

const yourStackNavigator = createStackNavigator({
  SomeRoute: SomeScreen,
  SpecificRoute: {
    screen: SpecificScreen,
    navigationOptions: ({ navigation }) => {
      return {
        headerLeft: (<HeaderBackButton onPress={_ => navigation.navigate("Somewhere")}/>)
      }
    }
  },
});
3
Rubek Joshi