如何在每个堆栈中的 react-navigation 中设置 header "burger" 而不复制它

Question

我构建了一个堆栈导航器，我想将汉堡添加到所有屏幕。 不是它的工作，但我为每个屏幕蚂蚁传递 header 它看起来笨拙、难以辨认和过度复制

问题有一种方法可以快捷方式或一次性通过它（也许在Stack.navigator？） 我的代码中的示例： （看看这一行：headerLeft: () =>,)

const StackNavigator = ({ navigation }) => (
<Stack.Navigator headerMode="screen" navigationOptions screenOptions={stackScreenOptions}>
    <Stack.Screen
        name="Main"
        component={MainScreen}
        headerMode="screen"
        options={{
            title: "ליאור",
            headerLeft: () => <AnimateHamburger navigation={navigation} />,
        }}
    />
    <Stack.Screen
        name="MainScreen"
        component={MainScreen}
        options={{
            title: "ליאור",
            headerLeft: () => <AnimateHamburger navigation={navigation} />,
        }}
    />
    <Stack.Screen
        options={{
            title: "meetings",
            headerLeft: () => <AnimateHamburger navigation={navigation} />,
        }}
        name="MeetingPicker"
        component={MeetingPicker}
    />
    <Stack.Screen
        options={{
            title: "ליאור",
            headerLeft: () => <AnimateHamburger navigation={navigation} />,
        }}
        name="UserHistory"
        component={UserHistory}
    />
    <Stack.Screen
        name="MyMeetings"
        component={UserHistory}
        options={{
            title: "ליאור",
            headerLeft: () => <AnimateHamburger navigation={navigation} />,
        }}
    />
    <Stack.Screen
        name="About"
        component={AboutScreen}
        options={{
            title: "ליאור",
            headerLeft: () => <AnimateHamburger navigation={navigation} />,
        }}
    />

    <Stack.Screen
        name="Location"
        component={LocationScreen}
        options={{
            title: "ליאור",
            headerLeft: () => <AnimateHamburger navigation={navigation} />,
        }}
    />
    <Stack.Screen
        name="Logout"
        component={LogoutModal}
        options={{
            title: "ליאור",
            headerLeft: () => <AnimateHamburger navigation={navigation} />,
        }}
    />
  </Stack.Navigator>
  );

   export default StackNavigator;

Answer 1

您需要在此处的代码中使用 stackScreenOptions 将其传递给 screenOptions：

<Stack.Navigator headerMode="screen" navigationOptions screenOptions={stackScreenOptions}>

查看关于此的 react-navigation 文档：

https://reactnavigation.org/docs/screen-options/#screenoptions-prop-on-the-navigator