2
votes

Comment utiliser la navigation de réaction dans un const?

J'ai utilisé const pour afficher les composants. Maintenant, lorsque j'utilise la navigation de réaction pour un bouton dans const, je vois cette erreur: undefined n'est pas un objet (évaluation de '_this.props.navigation.navigate')

J'ai essayé d'ajouter navigation = {this.props.navigation } au bouton pour autoriser la nabigation, mais cela n'a pas fonctionné.

const WomenTab = () => (
    <View>
      <Button onPress={() => {
                        this.props.navigation.dispatch(StackActions.reset({
                          index: 0,
                          actions: [
                            NavigationActions.navigate({ routeName: 'Wallet' })
                          ],
                        }))
                      }}>
          <Text>Click</Text>
      </Button>
    <View>
);

Lien de la bibliothèque: http://github.com/react-native-community/react-native-tab-view

reactjs react-native react-navigation react-native-navigation

0 commentaires

3 Réponses :

1
votes

Vous devez passer vos accessoires au const , quelque chose comme ceci

<WomenTab navigation={this.props.navigation} />

Ensuite, lorsque vous utilisez votre const vous passez les accessoires que vous voulez.

const WomenTab = (props) => (
    <View>
      <Button onPress={() => {
                        props.navigation.dispatch(StackActions.reset({
                          index: 0,
                          actions: [
                            NavigationActions.navigate({ routeName: 'Wallet' })
                          ],
                        }))
                      }}>
          <Text>Click</Text>
      </Button>
    <View>
);

1 commentaires

Je vous remercie. Cela a bien fonctionné lorsque j'ai utilisé en const normal. Mais maintenant, j'ai un autre const dans cette bibliothèque, et ne fonctionne pas pour cela. lien: github.com/react-native-community/react-native- onglet

5
votes

Cela s'appelle un composant fonctionnel a >, souvent appelé composant fonctionnel sans état.

L'une des différences majeures est que les SFC ne reçoivent pas automatiquement les accessoires, mais doivent plutôt être passés en arguments. Donc, au lieu de dire this.props , vous devriez utiliser ce modèle:

const WomenTab = ( {navigation} ) => ( // <-- you can pick the props you want via destructuring
  <View>
    <Button onPress={() => {
      navigation.dispatch(StackActions.reset({
        index: 0,
        actions: [ NavigationActions.navigate({ routeName: 'Wallet' }) ],
      }))
    }}>
      <Text>Click</Text>
    </Button>
  <View>
);

Puisque le prop de navigation est passé automatiquement aux enfants des navigateurs, vous ne le faites pas. t besoin de faire autre chose. Si vous vouliez passer d'autres accessoires, vous le feriez comme d'habitude:

<WomenTab myProp={value} />

Un autre modèle courant est de destructure les accessoires passés aux SFC comme ceci:

const WomenTab = (props) => ( // <-- add props as an argument
  <View>
    <Button onPress={() => {
      props.navigation.dispatch(StackActions.reset({
        index: 0,
        actions: [ NavigationActions.navigate({ routeName: 'Wallet' }) ],
      }))
    }}>
      <Text>Click</Text>
    </Button>
  <View>
);

J'espère que cela vous aidera, bonne chance!

2 commentaires

Bonne réponse. J'aime votre explication détaillée, la déstructuration est un bel ajout.

1
votes

En gros, vos accessoires ne sont pas passés du composant Parent au composant enfant. Assurez-vous d'avoir défini votre composant WomenTab dans la fonction createStackNavigator. Passez également les accessoires dans votre composant de fonction.

const WomenTab = (props) => (
<View>
  <Button onPress={() => {
                    this.props.navigation.dispatch(StackActions.reset({
                      index: 0,
                      actions: [
                        NavigationActions.navigate({ routeName: 'Wallet' })
                      ],
                    }))
                  }}>
      <Text>Click</Text>
  </Button>
<View>

);

2 commentaires

Cela ne fonctionnera pas car vous utilisez this.props.navigation il n'y a pas this que vous auriez besoin de supprimer this. pour que cela fonctionne .

@Andrew Merci de l'avoir mentionné. J'ai totalement oublié de supprimer le mot-clé this.