web-dev-qa-db-fra.com

Comment utiliser useNavigation () dans le tiroir @ react-navigation?

Comportement actuel

J'ai une application native react qui utilise react-navigation v5 pour le routage.

  1. J'ai un tiroir (menu offeset à gauche) dans toutes mes vues
  2. J'utilise stackNavigation pour la transition de page.

À cause de (1), ma structure est drawerNavigator (a) > stackNavigator (b) > views (c).

Lorsque j'essaie d'appeler le crochet useNavigation() dans mon <DrawerContent />, J'ai l'erreur suivante:

Error: We couldn't find a navigation object. Is your component inside a navigator?
    at useNavigation (bundle.js:8766)

Oui, je ne suis pas dans le stackNavigator donc le hook ne peut pas être appelé

Comportement attendu

Je m'attends à ce que la navigation soit disponible dans mon <DrawerContent />.

Votre environnement 

| software                       | version |
| ------------------------------ | ------- |
| iOS or Android                 | iOS, Android and web
| @react-navigation/native       | 5.0.0-alpha.41
| @react-navigation/stack         | 5.0.0-alpha.63
| @react-navigation/drawer       | 5.0.0-alpha.41
| react-native-reanimated        | 1.4.0
| react-native-gesture-handler   | 1.5.3
| react-native-safe-area-context | 0.6.2
| react-native-screens           | 2.0.0-alpha.32
| react-native                   | https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz
| expo                           | SDK36
| node                           | v13.5.0
| npm or yarn                    | 6.13.7

Comment puis-je utiliser @react-navigation/stack inside @react-navigation/drawer ou comment dois-je créer mon tiroir et mon application avec eux?

javascriptreactjsreact-nativereact-navigationreact-context
3
Dimitri Kopriwa

Vous n'êtes pas obligé d'utiliser useNavigation si vous êtes sur un écran dans le navigateur.

La structure du navigateur est la suivante.

  • stackNavigator
    • tiroirNavigateur
      • tiroirÉcrans
  • stackScreens

Le mouvement de l'écran est le suivant.

Exemple

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('moveScreenName')}
        title="Go to moveScreenName"
      />
    </View>
  );
}

useNavigation est un hook qui donne accès à l'objet navigation. C'est utile quand vous ne pouvez pas passer le prop navigation directement dans le composant, ou que vous ne voulez pas le passer dans le cas d'un enfant profondément imbriqué.

useNavigation() renvoie le support de navigation de l'écran dans lequel il se trouve.

Exemple

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}
0
hong developer