Javascript 如何在选项卡导航中添加标题？

我的导航系统使用一个经典的stackNavigator，在这里我初始化了所有的屏幕，在页面底部有一个底部选项卡Navigator，其中有4个屏幕

我想在大多数屏幕的标题中添加一个按钮。为此，我在每个Stack.screen的选项中添加了这些行，这样可以：

headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),

headerRight:（）=>(
导航。导航（'Activities'）}>
),

另一方面，我无法在底部选项卡导航器的屏幕标题中显示此按钮。我不明白为什么。我尝试在Tab.screen中执行与在Stack.screen中相同的操作，但没有结果

我该怎么办？感谢所有愿意花时间向我解释问题并帮助我解决问题的人

这是全部代码：

const Stack = createStackNavigator();
let lang = retrieveAppLang();
const Tab = createBottomTabNavigator();
const screenOptionStyle = {
  headerStyle: {
    backgroundColor: "#F78400",    
  },  
  headerTintColor: "white",
  headerBackTitle: "Back",
  backgroundColor:'#f7f6f6'
};

function getHeaderTitle(route) {
  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Orders'; // permet d'éviter que tous les écrans retournent 'Orders' dans le header comme précédemment
lang = retrieveAppLang();
  switch (routeName) {
    case 'Orders':
      return i18n.t('orders.title');
    case 'Dashboard':
      return i18n.t('dashboard.title');
    case 'Checkout':
      return i18n.t('checkout.title');
    case 'CashRegister':
      return i18n.t('cashregister.title');
    case 'Tools':
      return i18n.t('tools.title');
    case 'Settings':
      return i18n.t('settings.title');
    case 'Authentication': 
      return i18n.t("authentication.title") ;
    case 'Account': 
      return i18n.t("account.title");
    case 'Activities': 
      return i18n.t("activities.title"); 
    case 'Contact': 
      return i18n.t("contact.title"); 
    case 'Login': 
      return i18n.t("login.title");
    case 'Register': 
      return i18n.t("register.title");
    case 'Reset': 
      return i18n.t("reset.title");
    case 'Scan': 
      return i18n.t("scan.title");     
    case 'Current': 
      return i18n.t("current.title");
    case 'Completed': 
      return i18n.t("completed.title");
    case 'Products': 
      return i18n.t("products.title");
    case 'ProductDetails': 
      return i18n.t("fiche.title");
    case 'Information': 
      return i18n.t("information.title");
    case 'Photos': 
      return i18n.t("photos.title");
    case 'Stock': 
      return i18n.t("stock.title");
    case 'Terms': 
      return i18n.t("terms.title");
    case 'About': 
      return i18n.t("about.title");     
    case 'Tickets': 
      return i18n.t("tickets.title");
    case 'Dashboard': 
      return i18n.t("dashboard.title");    
    //case 'BottomTabNavigator': 
      //return i18n.t("welcome.title");
  }
}

export const MainStackNavigator = () => {
  return (
   <Stack.Navigator screenOptions={screenOptionStyle}>      
      <Stack.Screen 
        name = 'Orders' component = {BottomTabNavigator} 
        options={({route}) => ({
                    headerTitle: getHeaderTitle(route),})}/> 
      <Stack.Screen 
        name = 'Authentication' 
        component = {Authentication} 
        options={{title: i18n.t("authentication.title"), headerShown: false }}/>
      <Stack.Screen 
        name = 'Account' 
        component = {Account} 
        options={{ title: i18n.t("account.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                  style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),
        }}/>
      <Stack.Screen 
        name = 'Activities' 
        component = {Activities} 
        options={{ title: i18n.t("activities.title") }}/> 
      <Stack.Screen 
        name = 'Contact' 
        component = {Contact} 
        options={{ title: i18n.t("contact.title") }}/>
      <Stack.Screen 
        name = 'Checkout'
        component = {Checkout}
        options={{ title: i18n.t("checkout.title"),headerRight: () => (
            <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
              <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
            </TouchableOpacity>
          ),
        }}/>
      <Stack.Screen
        name = 'CashRegister'
        component = {CashRegister}
        options={{ title: i18n.t("cashregister.title"), headerRight: () => (
            <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
              <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
            </TouchableOpacity>
          ),
        }}/>
      <Stack.Screen 
        name = 'Login'
        component = {Login}
        options={{ title: i18n.t("login.title"), headerShown: false }}/>
      <Stack.Screen
        name = 'Register'
        component = {Register}
        options={{ title: i18n.t("register.title"), headerShown: false }}/>
      <Stack.Screen
        name = 'Reset'
        component = {Reset}
        options={{ title: i18n.t("reset.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),
        }}/>
      <Stack.Screen
        name = 'Tools'
        component = {Tools}
        options={{ title: i18n.t("tools.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
            ),
          }}/>
      <Stack.Screen
        name = 'Scan'
        component = {Scan}
        options={{ title: i18n.t("scan.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),
        }}/>      
      <Stack.Screen
        name = 'Current'
        component = {Current}
        options={{ title: i18n.t("current.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
            ),
          }}/>
      <Stack.Screen
        name = 'Completed'
        component = {Completed}
        options={{ title: i18n.t("completed.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),
        }}/>
      <Stack.Screen
        name = 'Products'
        component = {Products}
        options={{ title: i18n.t("products.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),
        }}/>
      <Stack.Screen
        name = 'ProductDetails'
        component = {ProductDetails}
        options={{ title: i18n.t("fiche.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),
        }}/>
      <Stack.Screen
        name = 'Information'
        component = {Information}
        options={{ title: i18n.t("information.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),
        }}/>
      <Stack.Screen
        name = 'Photos'
        component = {Photos}
        options={{ title: i18n.t("photos.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),
        }}/>
      <Stack.Screen
        name = 'Stock'
        component = {Stock}
        options={{ title: i18n.t("stock.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),
        }}/>
      <Stack.Screen
        name = 'Terms'
        component = {Terms}
        options={{ title: i18n.t("terms.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),
        }}/> 
      <Stack.Screen
        name = 'About'
        component = {About}
        options={{ title: i18n.t("about.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),
        }}/>      
      <Stack.Screen
        name = 'Tickets'
        component = {Tickets}
        options={{ title: i18n.t("tickets.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),
        }}/>
      <Stack.Screen
        name = 'Dashboard'
        component = {Dashboard}
        options={{ title: i18n.t("dashboard.title")}}/>
      <Stack.Screen 
        name = 'Settings'
        component = {Settings}
        options={{ title: i18n.t("settings.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),
        }}/>
      <Stack.Screen
        name = 'Welcome'
        component = {Welcome}
        options={{ title: i18n.t("welcome.title"), headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Activities')}>
            <Image source={require("./../assets/images/work.png")}
                    style={{width: 40, height: 40}} />                            
          </TouchableOpacity>
          ),
        }}/>
      <Stack.Screen name = 'BottomTabNavigator' component = {BottomTabNavigator} 
                                                options={({route}) => ({
                                                headerTitle: getHeaderTitle(route),})}/>
    </Stack.Navigator>
  );
}

export const BottomTabNavigator = (props) => {    
  if (lang.length == 2) {
    i18n.changeLanguage(lang);}
  return (
    <Tab.Navigator 
      tabBarOptions={{
        activeTintColor: 'black',
        lang: lang,
        labelStyle: {fontSize: 12, color: 'white'}, 
        style: {backgroundColor: '#F78400'}
      }}>
      <Tab.Screen
          name="Dashboard"
          component={Dashboard}
          options={{
            title: i18n.t('dashboard.title'),
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../assets/images/dashboard.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
      <Tab.Screen
        name='Orders'
        component={Orders}         
        options={{
          title: i18n.t('orders.title'),
          tabBarIcon: ({ focused, horizontal, tintColor }) => {
            return (
              <Image
                source={require("../assets/images/orders.png")}
                style={styles.icon}
              />
            );
          }
        }}
      />        
        <Tab.Screen
          name='Tools'
          component={Tools}
          options={{
            title: i18n.t('tools.title'),
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../assets/images/tools.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name='Settings'          
          component={Settings}
          options={{
            title: i18n.t('settings.title'),
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../assets/images/settings.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
    </Tab.Navigator>
  );
};

const Stack=createStackNavigator（）；
让lang=retrieveAppLang（）；
const Tab=createBottomTabNavigator（）；
常量屏幕选项样式={
头型：{
背景颜色：“F78400”，
},  
头部颜色：“白色”，
headerBackTitle:“后退”，
背景颜色：“#f7f6f6”
};
功能getHeaderTitle（路线）{
const routeName=getfocusedoudenamefromroute（route）？“Orders”；//在标题命令中保留“Orders”
lang=retrieveAppLang（）；
交换机（路由名称）{
案件"命令":
返回i18n.t（'orders.title'）；
案例“仪表板”：
返回i18n.t（'dashboard.title'）；
“结帐”案例：
返回i18n.t（'checkout.title'）；
“收银机”案例：
返回i18n.t（'cash register.title'）；
案例“工具”：
返回i18n.t（'tools.title'）；
案例“设置”：
返回i18n.t（'settings.title'）；
“身份验证”案例：
返回i18n.t（“身份验证名称”）；
“账户”案例：
返回i18n.t（“账户名称”）；
案例“活动”：
返回i18n.t（“活动名称”）；
“联系人”案例：
返回i18n.t（“联系人名称”）；
案例“登录”：
返回i18n.t（“login.title”）；
“登记册”一案：
返回i18n.t（“注册名称”）；
案例“重置”：
返回i18n.t（“重置标题”）；
案例“扫描”：
返回i18n.t（“扫描标题”）；
“当前”案例：
返回i18n.t（“当前所有权”）；
案件‘已完成’：
返回i18n.t（“完成的标题”）；
“产品”案例：
返回i18n.t（“产品名称”）；
案例“ProductDetails”：
返回i18n.t（“fiche.title”）；
案件‘资料’：
返回i18n.t（“信息标题”）；
案件‘照片’：
返回i18n.t（“照片标题”）；
“股票”案例：
返回18N.t（“股票所有权”）；
“条款”一案：
返回i18n.t（“条款所有权”）；
案例“关于”：
返回i18n.t（“关于所有权”）；
案件‘票’：
返回i18n.t（“票证名称”）；
案例“仪表板”：
返回i18n.t（“仪表板标题”）；
//案例“BottomTabNavigator”：
//return i18n.t（“welcome.title”）；
}
}
导出常量MainStackNavigator=（）=>{
返回(
({
headerTitle:getHeaderTitle（路由），}）}/>
(
导航。导航（'Activities'）}>
),
}}/>
(
导航。导航（'Activities'）}>
),
}}/>
(
导航。导航（'Activities'）}>
),
}}/>
(
导航。导航（'Activities'）}>
),
}}/>
(
导航。导航（'Activities'）}>
),
}}/>
(
导航。导航（'Activities'）}>
),
}}/>      
(
导航。导航（'Activities'）}>
),
}}/>
(
导航。导航（'Activities'）}>
),
}}/>
(
导航。导航（'Activities'）}>
),
}}/>
(
导航。导航（'Activities'）}>
),
}}/>
(
导航。导航（'Activities'）}>
),
}}/>
(
导航。导航（'Activities'）}>
),
}}/>
(
导航。导航（'Activities'）}>
),
}}/>
(
导航。导航（'Activities'）}>
),
}}/> 
(
导航。导航（'Activities'）}>
),
}}/>      
(
导航。导航（'Activities'）}>
),
}}/>
(
导航。导航（'Activities'）}>
),
}}/>
(
导航。导航（'Activities'）}>
),
}}/>
({
headerTitle:getHeaderTitle（路由），}）}/>
);
}
导出常量BottomTabNavigator=（道具）=>{
if（lang.length==2）{
i18n.changeLanguage（lang）；}
返回(
{
返回(
);
}
}}
/>
{
返回(