在选项卡导航器中，我定义如果将props传递给CustomHeader，则可以通过props.children访问当前活动选项卡，如下所示：

headerTitle: (props) => <CustomHeader {...props} />

...然而，问题是在这个场景中navigation对象不是props的一部分，并且，为了澄清，navigation对象是从这个组件之外进来的。
另一方面，如果我传递这样的 prop ：

headerTitle: () => <CustomHeader {...props} />

...那么我确实拥有navigation对象作为props的一部分，但我不再具有对props.children的访问权限。
我的问题是，如何在我的CustomHeader中访问这两者？
下面是bottomTabNavigator的代码：

export const ClientBottomTabNavigator = (props) => {
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: true,
        headerStyle: {
          backgroundColor: Colors.primary,
          elevation: 0,
          shadowOpacity: 0,
          shadowColor: 'transparent',
          height: 155,
        },
        headerShadowVisible: false,
        tabBarStyle: { backgroundColor: Colors.primary },
        headerTintColor: Colors.light,
        headerTitle: () => <CustomHeader {...props} />,
        tabBarActiveTintColor: Colors.light, 
        tabBarInactiveTintColor: Colors.lightInactive,
        tabBarActiveBackgroundColor: Colors.primary,
        tabBarInactiveBackgroundColor: Colors.primary,
      }}
      initialRouteName={'Sessions'}
    >
      <Tab.Screen
        name='Sessions'
        component={SessionsTab}
        options={{
          tabBarLabel: 'SESSIONS',
          tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
        }}
      />
      <Tab.Screen
        name='Chart'
        component={ChartTab}
        options={{
          tabBarLabel: 'CHARTS',
          tabBarIcon: ({ color, size }) => <FontAwesome name='id-badge' color={color} size={size} />,
        }}
      />
      <Tab.Screen
        name='Goals'
        component={GoalsTab}
        options={{
          tabBarLabel: 'EDIT GOALS',
          tabBarIcon: ({ color, size }) => <FontAwesome name='trophy' color={color} size={size} />,
        }}
      />
    </Tab.Navigator>
  );
};

下面是CustomHeader代码：

const CustomHeader = (props) => {
  const patient = useSelector(selectActivePatient);
  const dispatch = useDispatch();
  return (
    <View>
      <View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 }}>
        <Feather
          name='chevron-left'
          size={24}
          onPress={() => {
            props.navigation.navigate('Main'); // Here is where I want to be able to customize the back button based on the currentTab
          }}
          color={styles.colors.textInverse}
          style={{ minWidth: '8%', justifySelf: 'flex-start', alignSelf: 'flex-start' }}
        />
        <Text
          style={{
            color: Colors.light,
            fontSize: 18,
            alignSelf: 'center',
            justifySelf: 'center',
            fontWeight: 'bold',
          }}
        >
          {patient?.firstName} {patient?.lastName}
        </Text>
        <Feather
          name='' // Leave this blank
          style={{ minWidth: '8%', justifySelf: 'flex-end', alignSelf: 'flex-end' }}
        />
      </View>

      <View style={{ alignItems: 'center', paddingBottom: 6 }}>
        <Text style={{ color: '#fff', fontSize: 18, marginBottom: 6 }}>{convertService(patient?.service)}</Text>
        <View>
          <TextInput
            style={{
              color: Colors.light,
              fontSize: 16,
              width: '100%',
              textAlign: 'center',
            }}
            placeholder='Add a note...'
            placeholderTextColor={styles.colors.textPlaceholder}
            maxLength={50}
            onChangeText={(text) => dispatch(updateNote(patient?.id, text))}
            defaultValue={patient?.note?.value}
          />
        </View>
      </View>
    </View>
  );
};