Динамически включать заголовок в качестве компонента в RockScreen StackNavigator

Question

Я хочу иметь собственный заголовок над моими вкладками навигации. У меня есть компонент для заголовка, который я включаю в RootScreen, но у меня нет способа динамически показать / скрыть это, насколько я нашел.

const tabBarLabelAndNotifications = (notifications, stack) => {
  return (
    <View style={{display: 'flex', flexDirection: 'row'}}>
      <Text style={{color: '#3F92DF', fontSize: 10, fontWeight: 'bold'}}>{stack}</Text>
      <View style={styles.circle}>
        <Text style={[styles.notifications, styles.fontLatoBold]}>{notifications}</Text>
      </View>
    </View>
  )
}

const EngagementStack = createStackNavigator({
  Engagements: EngagementsScreen,
});

EngagementStack.navigationOptions = {
  tabBarLabel: 'ENGAGEMENTS',
};

const QueryStack = createStackNavigator({
  Queries: QueriesScreen,
});

QueryStack.navigationOptions = {
  tabBarLabel: tabBarLabelAndNotifications(4, 'QUERY')
};

const IssuesStack = createStackNavigator({
  Issues: IssuesScreen,
});

IssuesStack.navigationOptions = {
  tabBarLabel: tabBarLabelAndNotifications(2, 'ISSUES')
};

const TabNavigator = createMaterialTopTabNavigator({
  EngagementStack,
  QueryStack,
  IssuesStack
},
  {
    tabBarOptions: {
      style: {
        backgroundColor: 'transparent'
      },
      labelStyle: {
        color: '#3F92DF',
        fontWeight: 'bold',
        fontSize: 10
      },
      indicatorStyle: {
        height: '100%',
        backgroundColor: 'rgba(82, 170, 231, 0.2)',
        borderRadius: 4
      }
    }
  }
);

const RootStack = createStackNavigator(
  {
    Main: {
      screen: TabNavigator
    },
    EngagementDetailModal: {
      screen: EngagementDetailModal
    },
    RequestForRecordsModal: {
      screen: RequestForRecordsModal
    }
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
)

const RootNav = createAppContainer(RootStack);

export default function RootScreen() {
  return (
    <View style={{ flex: 1 }}>
      <Header />
      <RootNav />
    </View>
  );
}

из кода выше, я хочу динамически показывать компонент <Header />, пока я на странице, а не модал.

Я пытался использовать withNavigation в том же файле, что и код, который я разместил, но проверка свойства навигации просто дает мне неопределенное значение. Кажется, что код никогда не перерисовывается из корня. Я пытался добавить навигационные опции для каждой отдельной страницы, но мой пользовательский заголовок не отображается.

РЕДАКТИРОВАТЬ 1 : согласно документации . Следующий код показывает только пустой пробел над вкладками в моем представлении

static navigationOptions = {
    // headerTitle instead of title
    headerTitle: <Header />,
  };

И компонент, который импортируется только для проверки

export default function Header() {
    return (
        <View><Text>hi</Text></View>
    )
}

Answer 1

Попробуйте с

static navigationOptions = ({ navigation, tintColor }) => {

    return {
      headerTitle: (
        <Header />
      ),
      headerLeft: (
        <View />
      ),
      headerRight: (
       <View />
      )
    };
  };

Answer 2

Внутри экрана, где вы хотите скрыть / показать модальные параметры статической навигации:

   static navigationOptions = ({ navigation }) => {
    const { state } = navigation;
    let header = <CustomHeader />;
    if (state.params) header = state.params.modalShowing ? null : <CustomHeader />
    return { header }
}

Затем, когда вы хотите показать модал, сделайте setParams:

this.props.navigation.setParams({modalShowing:!this.state.showModal})