web-dev-qa-db-fra.com

react-navigation - navigation à partir du composant enfant

J'ai un classement qui appelle un composant et lui transmet les données comme suit:

   _renderItem =({item}) => (
    <childComponent
        key={item._id}
        id={item._id}
        name={item.name}
    />
   );

Et à l'intérieur du composant enfant j'essaie de faire ceci:

    <TouchableOpacity onPress={() => this.props.navigation.navigate("Profile", { id: this.props.id})} >
       <View>
         <Right>
              {arrowIcon}
         </Right>
       </View>
    </TouchableOpacity>

Où j'espère qu'il ira ensuite à la page de profil et récupérera les données correctes en fonction de l'identifiant qui lui a été transmis. Le problème est que lorsque je clique sur la flèche pour accéder à la page de profil, le message d'erreur suivant s'affiche: Impossible de lire la propriété 'naviguer dans indéfini . J'ai mis à la fois le classement et childComponent dans mes fichiers HomeDrawerrRoutes.js et MainStackRouter.js. Toute aide serait formidable, merci.

react-nativereact-navigation
6
kcuhcx2

Voici un exemple de 3 pages qui montre comment passer la fonction navigate à un composant enfant et comment personnaliser les accessoires envoyés aux écrans depuis StackNavigator.

// subcomponent ... receives navigate from parent
const Child = (props) => {
    return (
        <TouchableOpacity 
            onPress={() => props.navigate(props.destination) }>
            <Text>{props.text}>>></Text>
        </TouchableOpacity>
    );
}
// receives navigation from StackNavigator
const PageOne = (props) => {
    return (
        <View>
            <Text>Page One</Text>
            <Child 
                navigate={props.navigation.navigate} 
                destination="pagetwo" text="To page 2"/>
        </View>
    )
}
// receives custom props AND navigate inside StackNavigator 
const PageTwo = (props) => (
    <View>
        <Text>{props.text}</Text>
        <Child 
            navigate={props.navigation.navigate} 
            destination="pagethree" text="To page 3"/>
    </View>
);
// receives ONLY custom props (no nav sent) inside StackNAvigator
const PageThree = (props) => <View><Text>{props.text}</Text></View>

export default App = StackNavigator({
    pageone: { 
        screen: PageOne, navigationOptions: { title: "One" } },
    pagetwo: { 
        screen: (navigation) => <PageTwo {...navigation} text="Page Deux" />, 
        navigationOptions: { title: "Two" } 
    },
    pagethree: { 
        screen: () => <PageThree text="Page III" />, 
        navigationOptions: { title: "Three" }
    },
});
7
Wainage

Il existe une solution facile pour cela,

utilisez withNavigation. c'est un composant d'ordre supérieur qui passe l'hélice de navigation dans un composant enveloppé.

exemple de composant enfant

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class ChildComponent extends React.Component {
  render() {
    <View
      onPress = {()=> this.props.navigation.navigate('NewComponent')}>
     ... logic
    </View>

  }
}

// withNavigation returns a component that wraps ChildComponent and passes in the
// navigation prop
export default withNavigation(ChildComponent);

pour plus de détails: https://reactnavigation.org/docs/fr/connecting-navigation-prop.html

8
Adarsh

Pour une raison quelconque, si vous ne souhaitez pas utiliser withNavigation, la solution suivante fonctionne également. Vous devez simplement passer la navigation comme accessoire à votre composant enfant.

Par exemple:


export default class ParentComponent extends React.Component {
 render() {
   return (
      <View>
        <ChildComponent navigation={this.props.navigation} />
      </View>
      );
    }
  }

Et en composant enfant:

const ChildComponent = (props) => {
   return (
       <View>
         <TouchableOpacity 
           onPress={() => props.navigation.navigate('Wherever you want to navigate')}      
          />
       </View>
      );
    };
export default ChildComponent;
1
Aditya Yadavalli