react-native - 将参数传递给自定义标头 React native

Question

我有一个屏幕显示我从服务器获取的一些医生的平面列表。

现在单击其中一个会引导您进入他的配置文件屏幕，其中包含一个自定义标题。在这个标题上，我想显示他的照片和名字：

但标题组件在我的 stackscreen.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>

我会感谢你的帮助！

标签： react-native

Answer 1

您可以获得如下参数

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