React Navigation中根据isInitial条件渲染headerLeft的实现方案

你当前代码里headerLeft的else分支返回true是错误的，要实现需求，只需调整headerLeft的条件逻辑，同时配合headerBackVisible的控制即可，修改后的代码如下：

useFocusEffect(
  useCallback(() => {
    const isInitial = route.params?.isInitial;

    console.log({isInitial});

    navigation.setOptions({
      headerStyle: {
        backgroundColor: sessionDetail?.title
          ? backgrounds(sessionDetail?.title, true)
          : '',
      },
      // 关键修改：isInitial为false时设为undefined，让导航显示默认返回箭头
      headerLeft: isInitial ? (
        <TouchableOpacity
          onPress={() =>
            navigation.reset({
              routes: [
                {
                  name: 'mainTab',
                  state: {
                    routes: [{name: 'inspection'}],
                  },
                },
              ],
            })
          }>
          <Title>Home</Title>
        </TouchableOpacity>
      ) : undefined,
      // isInitial为false时显示默认返回箭头，所以这里设为!isInitial
      headerBackVisible: !isInitial,
      headerTitle: '',
    });

    const isFinishedAllTests = sessionDetail?.imtests_details?.every(
      item => item.is_done,
    );
    if (isFinishedAllTests && sessionDetail?.status === 'TEST_IN_PROGRESS') {
      setTimeout(() => {
        setCompleteModalVisible(true);
      }, ANIMATION_DURATION * 1.5);
    }
  }, [navigation, sessionDetail, route.params?.isInitial]),
);

关键说明： #

• 在@react-navigation/native-stack中，当headerLeft设为undefined时，导航会自动渲染默认的返回箭头组件；
• headerBackVisible: !isInitial确保只有当isInitial为false时，默认返回箭头才会显示，避免自定义组件和默认箭头同时出现；
• 保持useFocusEffect的依赖项完整，确保isInitial变化时能重新更新导航选项。

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