Передача параметров в собственный заголовок React

Question

У меня есть экран, на котором отображается плоский список некоторых врачей, которых я получил с сервера.

введите описание изображения здесь

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

введите описание изображения здесь

, но компонент заголовка находится на моем экране стека. js и я не могу понять, как это сделать

<Stack.Screen name="Mon Profil" component={GProfMed} options={{
            headerTintColor: '#fff',
            headerStyle: {
              backgroundColor: '#1E79C5',
              height: 100,
            },
            headerTitleAlign: 'center',
            headerTitleStyle: {
              fontWeight: 'bold'
            },
            headerTitle: ()=> <HeaderMc/>
             
          }} />

и это мой код плоского списка:

 <View style={styles.ctr1}>
                    {
                        (this.props.Med.obj) ?
                            <TouchableOpacity style={{ flexDirection: 'row', flex: 1 }} onPress={() => {

                                NavigationService.navigate('Mon Profil', { id: Med.obj.id })


                            }}>
                                <Image style={styles.img} source={require('../assets/1.jpg')} />
                                {/*<Image style={styles.img} source={{ uri:getImageFromApi( Med.obj.image ) }} />*/}
                                <View style={{ flexDirection: 'column', flex: 1 }}>
                                    <Text style={styles.txt}>{Med.obj.name} </Text>
                                    <Text style={{ color: '#1E79C5', fontWeight: "bold",alignSelf:'flex-end',marginLeft:5 }}>{Med.distance} </Text>
                                    {
                                        (Med.obj.specialite) ?
                                            <Text style={{ color: '#FFC617' }}>{Med.obj.specialite} </Text>
                                            :
                                            <></>
                                    }
                                    {
                                        (Med.obj.adress_obj) ?
                                            <Text style={{ color: '#FFC617' }}>{Med.obj.adress_obj} </Text>
                                            :
                                            <></>
                                    }

                                    <Text style={{ color: '#FFC617' }}>{Med.service_display}</Text>
                                    {
                                        (Med.lieux_color_ref) ?
                                            Med.lieux_color_ref.map((lng, key) => {
                                                return <Text key={key}>{lng.lieu}</Text>
                                            })
                                            :
                                            <></>
                                    }
                                    

                                </View>
                            </TouchableOpacity>

Буду признателен за вашу помощь!

Answer 1

Вы можете получить параметры, как показано ниже

options={({ route }) => ({
  headerTintColor: '#fff',
  headerStyle: {
    backgroundColor: '#1E79C5',
    height: 100,
  },
  headerTitleAlign: 'center',
  headerTitleStyle: {
    fontWeight: 'bold',
  },
  headerTitle: () => <HeaderMc id={route.params.id} />,
})}