react-navigation中的动态标题

Question

我正在react-navigation v5.0.0中使用功能性方法，并且我有一个包含以下内容的堆栈导航器：

App.js

<Stack.Screen
   name="Profil"
   component={Profile}
   options={{
      headerStyle: {
         backgroundColor: '#2270b9'
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
         color: 'white'
      },
      headerRight: () => (
         <View style={{ flex: 1, flexDirection: 'row' }}>
            <Ionicons
               style={{ color: 'white', marginRight: 15, marginTop: 5 }}
               size={32}
               onPress={() => { _sendMessage(...) }}            // <--- problem is here
               name="ios-mail"
               backgroundColor="#CCC"
            />
         </View>
      )
   }}
/>

配置文件组件大致如下所示：

Profile.js

export default function Profile({ route, navigation }) {
   const { profile } = route.params;

   return (
      <SafeAreaView style={styles.container}>
         <View style={styles.container}>
            <ScrollView contentContainerStyle={styles.contentContainer}>
   [...]

现在的问题是，在打开配置文件时，Profile已用有效载荷对象（“配置文件”）初始化：

Search.js / Visitors.js

navigation.navigate('Profil', { profile });

问题是，在App.js中添加的发送按钮需要将配置文件对象作为路由参数传递给Profile.js，但在App.js中不可用。

如何在Profile组件中创建标题按钮，从而可以访问配置文件对象？

Answer 1

您可以尝试修改选项属性以将route作为参数，例如：

Answer 2

实际上，我发现可以解决此问题-可以通过在Profile.js（对象可用的位置）而不是App.js中添加标头来解决此问题。