Передача данных на маршруты навигации React Native

Question

Я сделал экран из плоского списка, который отображает кучу информации врачей (имя, местоположение, изображение), когда я нажимаю на вид доктора, он переходит к его профилю. на данный момент экран профиля просто пустой, но я хочу передать параметры, чтобы я мог просто отобразить их, не повторяя вызов API. Вот код экрана исследования, где плоский список:

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

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

Я создал компонентный элемент медикамента для стилизации моего плоского списка: //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>
      );
    }
} 

последний, это мой профиль доктора:

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

Может кто-нибудь, пожалуйста, помогите мне сделать это. спасибо

Answer 1

В вашем отправляющем компоненте используйте это:

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

//Send it like this

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

В вашем принимающем компоненте

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

//Can access it using

console.log(this.params.name);

Answer 2

спасибо всем! getParam не будет работать для меня. Я использовал это, чтобы решить проблему

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

и на экране профиля //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>

Answer 3

Отправка данных с помощью такой навигации

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

Получение данных на экране MedProfil

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