如何在React Navigation的Stack中统一设置汉堡头，避免代码重复

当然有办法一次性搞定！你现在的代码重复率太高了，React Navigation（从代码结构看应该是5+版本）提供了全局配置screenOptions的能力，完全不用每个屏幕都写一遍相同的header配置。

具体步骤： #

1. 提取公共配置为全局screenOptions函数
   把你重复的headerLeft和默认title抽出来，写成一个函数（因为需要获取每个屏幕的navigation参数）：

   const globalStackOptions = ({ navigation }) => ({
     title: "ליאור", // 默认标题
     headerLeft: () => <AnimateHamburger navigation={navigation} />
   });
   

2. 在Stack.Navigator中应用全局配置
   把这个函数传给Stack.Navigator的screenOptions属性，同时删掉原来每个Stack.Screen里重复的headerLeft和默认title：

   const StackNavigator = ({ navigation }) => (
     <Stack.Navigator 
       headerMode="screen" 
       screenOptions={globalStackOptions} // 这里用全局配置
       // 注意：你原来写的navigationOptions已经废弃，直接删除即可
     >
       <Stack.Screen name="Main" component={MainScreen} />
       <Stack.Screen name="MainScreen" component={MainScreen} />
       {/* 只有需要自定义标题的屏幕才单独设置options */}
       <Stack.Screen 
         name="MeetingPicker" 
         component={MeetingPicker} 
         options={{ title: "meetings" }} 
       />
       <Stack.Screen name="UserHistory" component={UserHistory} />
       <Stack.Screen name="MyMeetings" component={UserHistory} />
       <Stack.Screen name="About" component={AboutScreen} />
       <Stack.Screen name="Location" component={LocationScreen} />
       <Stack.Screen name="Logout" component={LogoutModal} />
     </Stack.Navigator>
   );
   export default StackNavigator;
   

处理例外情况： #

如果某个屏幕不需要汉堡菜单，或者需要自定义不同的headerLeft，直接在该屏幕的options里覆盖即可：

// 隐藏汉堡菜单的屏幕
<Stack.Screen 
  name="NoBurgerScreen" 
  component={NoBurgerComponent}
  options={{ headerLeft: () => null }}
/>

// 自定义headerLeft组件的屏幕
<Stack.Screen 
  name="CustomHeaderScreen" 
  component={CustomComponent}
  options={{ headerLeft: () => <CustomButton navigation={navigation} /> }}
/>

额外提示： #

• 你原来代码里Stack.Screen上的headerMode="screen"是多余的，headerMode是Stack.Navigator的专属属性，屏幕级别不需要设置。
• 如果你用的是React Navigation 6+，写法基本一致，只是headerMode被替换成了presentation属性，但核心的全局screenOptions逻辑完全相同。

这样你的代码会简洁很多，后续维护也更方便！

内容的提问来源于stack exchange，提问作者Roei Grinshpan