嵌套堆栈上的 headerLeft 完全忽略

Question

我想有条件地渲染headerLeft，但不管我做什么，它都会忽略我。

按照我的代码：

return (
    <Stack.Navigator>
      {screens.map((screen, index) => {
        const isQuestion = screen.screen === "Question";

        return (
          <Stack.Screen
            key={index}
            name={screen.name}
            component={getTemplate}
            initialParams={{ index, screen }}
          
            options={{
              ...DefaultNavigationOptions()[screen.theme],
              headerBackTitleVisible: false,
              title: lessonName,
              headerTintColor: isQuestion ? 'red' : '', // <- works!

              // headerBackImage: Variable.icons.circle, // <- attempt that did not work
              
              // headerLeft: () => { // <- attempt that did not work
              //   return null;
              // },

              headerLeft: props => ( // <- not working
                <HeaderBackButton
                  {...props}
                  disabled={true}  
                />
              ),

              headerRight: () => ( // <- works!
                <HeaderButton
                  handleOnPress={() => onExit()}
                  icon={Variable.icons.exit}
                  theme={screen.theme}
                />
              ),
            }}
          />
        );
      })}
    </Stack.Navigator>
  );

我现在尝试的只是以某种方式更改headerLeft，只是为了看看它是否正常工作，以便在我可以使其有条件之后。

已经尝试在文档 https://reactnavigation.org/docs/stack-navigator 以及在 stackoverflow 上完成的其他问题中找到解决方案，但到目前为止还没有运气。

 "@react-navigation/native": "^5.7.2",
 "@react-navigation/native-stack": "^5.0.5",
 "@react-navigation/stack": "^5.8.0",

不胜感激。

Answer 1

所以，问题在于我使用的是 const Stack = createNativeStackNavigator(); 而不是 const Stack = createStackNavigator();

更多信息在这里https://reactnavigation.org/docs/native-stack-navigator/如果有人感兴趣。