将数据传递给路由导航 React Native

Question

I made a screen of a flatlist that displays a bunch of Doctors infos(name,location,Picture),when i click on a doctor view it navigates to his profil. for the moment the profil screen is just blank, but i want to pass the params so i can just display them without re doing the api call. here is the code of the research screen where the flatlist is:

 render(){
      return (
        <View style={styles.main_container}>

            <FlatList 
                data={this.state.dataSource}
                keyExtractor={item=> item.id.toString()}
                renderItem= {({item})=> <MedItem Med={item}  />} />
        </View>
      );
    }

i created a component custom med item to style my flat list: //Meditem.js

class MedItem extends React.Component {
    render(){
        const Med = this.props.Med
      return (
        <View style={styles.main_container}  >

            <View style={styles.ctr1}>
                <TouchableOpacity onPress={()=>NavigationService.navigate('MedProfil')}>
                    <Image style={styles.img} source={require('../assets/Title.jpg')} />
                </TouchableOpacity>    
                <TouchableOpacity onPress={()=>NavigationService.navigate('MedProfil')}>
                    <Text style={styles.txt}> {Med.name} </Text>
                    <Text style={{flexWrap:'wrap'}} > {Med.specialite} </Text>
                    <Text> {Med.work} </Text>
                </TouchableOpacity>
            </View>
            <View style={styles.ctr2}>
                    <Text style={{textAlign:'center',marginBottom:5}}>Disponibilité</Text>

                    <Calendar/> 


            </View>
        </View>
      );
    }
} 

last this is my doctor profil screen:

export default class MedProfilScreen extends React.Component {
  render(){
    return(
      <View>
        <Text>{Med.name}</Text>
        <Button title='Prendre rendez-vous' onPress={()=>{}} />
      </View>
    );
  }
}

Can someone please help me doing this. thank you

Answer 1

Send Data through navigation like this

this.props.navigation.navigate("MedProfil",
      {
       name:Med.name
      })

Get data in MedProfil Screen

const name=this.props.navigation.getParam("name")

Answer 2

In your Sending component use this:

constructor(props) {
    super(props);
    this.navigate = this.props.navigation.navigate; 
}

//Send it like this

this.navigate("MedProfilScreen", { name:Med.name });

In your receiving component

constructor(props) {
    super(props);
    this.params = this.props.navigation.state.params;
}

//Can access it using

console.log(this.params.name);

Answer 3

thank you everyone! getParam won't work for me. i used this to solve the problem

//MedItem.js
<TouchableOpacity onPress={()=>NavigationService.navigate('MedProfil',Med)}>

and in the profil screen //MedProfil.js

export default function MedProfilScreen({route}){
    const {name,specialite,work}=route.params;
    return(
      <ScrollView contentContainerStyle={{flex:1,alignItems:'center'}}>
        <View style={styles.ctr1}>
          <Text>{name}</Text>
          <Text>{specialite}</Text>
          <Text>{work}</Text>