在React导航中有条件地渲染headerLeft

Question

我正在使用 React Native 和 React Navigation。我想根据 isInitial 的值有条件地渲染 headerLeft 组件。如果 isInitial 为 true，我希望 headerLeft 呈现如下代码所示。如果 isInitial 为 false，我希望显示默认的后退箭头 V 形。我怎样才能实现这个目标？

这是 isInitial 为 true 时的代码：

lib versions
"@react-navigation/bottom-tabs": "^6.5.11",

"@react-navigation/native": "^6.1.9",

"@react-navigation/native-stack": "^6.9.17",

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

      console.log({isInitial});

      navigation.setOptions({
        headerStyle: {
          backgroundColor: sessionDetail?.title
            ? backgrounds(sessionDetail?.title, true)
            : '',
        },
        headerLeft: () =>
          isInitial ? (
            <TouchableOpacity
              onPress={() =>
                navigation.reset({
                  routes: [
                    {
                      name: 'mainTab',
                      state: {
                        routes: [{name: 'inspection'}],
                      },
                    },
                  ],
                })
              }>
              <Title>Home</Title>
            </TouchableOpacity>
          ) : (
            true
          ),
        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]),
  );

Answer 1

我通过分发公共选项和附加选项解决了这个问题。

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

   
    const commonOptions = {
      headerStyle: {
        backgroundColor: sessionDetail?.title
          ? backgrounds(sessionDetail?.title, true)
          : '',
      },
      headerTitle: '',
    };

    const additionalOptions = isInitial
      ? {
          headerBackVisible: false,
          headerLeft: () => (
            <TouchableOpacity
              onPress={() =>
                navigation.reset({
                  routes: [
                    {
                      name: 'mainTab',
                      state: {
                        routes: [{name: 'inspection'}],
                      },
                    },
                  ],
                })
              }>
              <Title>Home</Title>
            </TouchableOpacity>
          ),
        }
      : {
          headerBackVisible: true,
        };

    navigation.setOptions({
      ...commonOptions,
      ...additionalOptions,
    });

    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, route.params?.isInitial, sessionDetail]);