Javascript 如何根据底部选项卡导航器的路径将按钮添加到堆栈导航器标题？

我正在处理react本机项目，当底部选项卡导航器的路径为GuestList时，我想将headerRightButton添加到stack.screen。我尝试在GuestList的componentDidUpdate函数中更改堆栈屏幕选项，但我只能使用此方法将按钮添加到标题。因此，我需要动态更改标题

App.js

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as eventActions from './src/redux/actions/eventActions';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/Ionicons';
import Home from './src/components/home/Home';
import EventDetail from './src/components/eventDetail/EventDetail';
import prompt from 'react-native-prompt-android';

const Stack = createStackNavigator();

class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator screenOptions={{
          headerStyle: {
            backgroundColor: '#00b894'
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold'
          }
        }}
          initialRouteName='Home'
        >
          <Stack.Screen name="Home" component={Home} options={{
            headerRight: () => (
              <Icon.Button name="add-outline" size={25} backgroundColor='#00b894' onPress={() => prompt(
                'New Event',
                '',
                [
                  { text: 'Cancel', style: 'cancel' },
                  { text: 'OK', onPress: eventName => { this.props.actions.addEvent(eventName) } },
                ],
                {
                  cancelable: true,
                  defaultValue: '',
                  placeholder: 'Event Name'
                }
              )}
              >
              </Icon.Button>
            )
          }}
          />

          <Stack.Screen name="EventDetail" component={EventDetail} options={{ title: this.props.eventName }} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

function mapStateToProps(state) {
  return {
    eventName: state.changeEventReducer
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      addEvent: bindActionCreators(eventActions.addEvent, dispatch)
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

从“React”导入React；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“/src/redux/actions/eventActions”导入*作为事件操作；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“反应本机矢量图标/离子图标”导入图标；
从“/src/components/Home/Home”导入Home；
从“/src/components/EventDetail/EventDetail”导入EventDetail；
从“react native prompt android”导入提示；
const Stack=createStackNavigator（）；
类应用程序扩展了React.Component{
render（）{
返回(
(
提示(
“新事件”，
'',
[
{文本：“取消”，样式：“取消”}，
{text:'OK'，onPress:eventName=>{this.props.actions.addEvent（eventName）}，
],
{
可取消：对，
默认值：“”，
占位符：“事件名称”
}
)}
>
)
}}
/>
);
}
}
函数MapStateTops（状态）{
返回{
eventName:state.changeEventReducer
};
}
功能图DispatchToprops（调度）{
返回{
行动：{
addEvent:bindActionCreators（eventActions.addEvent，dispatch）
}
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；

EventDetail.js

import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import Date from './tabs/Date';
import GuestList from './tabs/GuestList';
import ShoppingList from './tabs/ShoppingList';
import ToDoList from './tabs/ToDoList';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Tab = createMaterialBottomTabNavigator();

class EventDetail extends React.Component {
    render() {
        return (
            <Tab.Navigator barStyle={{ backgroundColor: '#00b894' }} initialRouteName='Date'>
                <Tab.Screen name="Date" component={Date} options={{
                    title: 'Date',
                    tabBarIcon: ({ color }) => (
                        <MaterialCommunityIcons name="calendar" color={color} size={26} />
                    ),
                }}
                />
                <Tab.Screen name="GuestList" component={GuestList} options={{
                    title: 'Guest List',
                    tabBarIcon: ({ color }) => (
                        <MaterialCommunityIcons name="account-multiple" color={color} size={26} />
                    ),
                }}
                />
                <Tab.Screen name="ShoppingList" component={ShoppingList} options={{
                    title: 'Shopping List',
                    tabBarIcon: ({ color }) => (
                        <MaterialCommunityIcons name="cart" color={color} size={26} />
                    ),
                }}
                />
                <Tab.Screen name="ToDoList" component={ToDoList} options={{
                    title: 'To-Do List',
                    tabBarIcon: ({ color }) => (
                        <MaterialCommunityIcons name="format-list-checks" color={color} size={26} />
                    ),
                }}
                />
            </Tab.Navigator>
        );
    }
}

export default EventDetail;

从“React”导入React；
从“@react navigation/material bottom tabs”导入{createMaterialBottomTabNavigator}；
从“./tabs/Date”导入日期；
从“./tabs/GuestList”导入来宾列表；
从“./tabs/ShoppingList”导入ShoppingList；
从“/tabs/ToDoList”导入ToDoList；
从“反应本机向量图标/材料通信图标”导入材料通信图标；
const Tab=createMaterialBottomTabNavigator（）；
类EventDetail扩展了React.Component{
render（）{
返回(
(
),
}}
/>
(
),
}}
/>
(
),
}}
/>
(
),
}}
/>
);
}
}
导出默认事件详细信息；

GuestList.js

import React from 'react';
import {
  View,
  Text
} from 'react-native';

class GuestList extends React.Component {
  render() {
    return (
      <View>
        <Text>Guest List</Text>
      </View>
    );
  }
}

export default GuestList;

从“React”导入React；
进口{
看法
正文
}从“反应本机”；
类GuestList扩展了React.Component{
render（）{
返回(
客人名单
);
}
}
导出默认来宾列表；