Реагируйте с навигацией: установите параметры в Nested Navigator

Question

В моем приложении React Native я использую React Navigation.

Это приложение, которое позволяет пользователю выполнять поиск в основной базе данных, т.е. по именам. GIF ниже иллюстрирует навигацию.

На целевом экране нажимается кнопка Go to search (Навигатор основного стека) -> появляется заголовок, который в порядке. На втором экране есть bottomTabNavigator, где выбрано names (в names есть вложенная секунда StackNavigator).

Это приводит к третьему экрану. Здесь показаны три карты. С помощью второго StackNavigator, нажав на Mehr, открывается экран подробностей.

Чего я хочу добиться, так это того, чтобы заголовок первого StackNavigator (того, что вверху) исчезал, как только пользователь открывает экран сведений.

Вы видите там кнопку потому что на первом этапе я хотел, чтобы заголовок исчез при нажатии кнопки. Приведенный ниже код работает, если он реализован на экране, который непосредственно получен из первого StackNavigator. Но поскольку я нахожусь во вложенном навигаторе, он больше не работает.

Вот код:

App.tsx:

imports ...

class RootComponent extends React.Component {
  render() {
    const image = require('./assets/images/corrieBackground3.png');

    console.log('calling the store', this.props.resultValue); // undefined

    return (
      <View style={styles.container}>
          <LandingPage />
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    LandingPage: {
      screen: RootComponent,
      navigationOptions: {
        header: null,
      },
    },
    SearchScreen: {
      screen: SearchScreen,
      navigationOptions: {
        title: 'I SHOULD DISAPPEAR',
      },
    },
  },
  {
    initialRouteName: 'LandingPage',
  },
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

TwoTabs.tsx (для 2-го экрана):

imports ...

const SearchBarStack = createStackNavigator(
  {
    SearchBar: {
      screen: SearchBar,
      navigationOptions: {
        header: null,
      },
    },
    Details: {
      screen: Details,
      navigationOptions: {
        title: 'I am here, above header disapear',
      },
    },
  },
  {
    initialRouteName: 'SearchBar',
  },
);

const TabNavigator = createBottomTabNavigator(
  {
    One: {
      screen: SearchCriteria,
      navigationOptions: {
        tabBarLabel: 'criteria',
      },
    },
    Two: {
      screen: SearchBarStack,
      navigationOptions: {
        tabBarLabel: 'names',
      },
    },
  },
);

const TabLayout = createAppContainer(TabNavigator);

type Props = {};

const TwoTabsHorizontal: React.FC<Props> = ({}) => {
  return (
    <View>
      <TabLayout />
    </View>
  );
};

export default TwoTabs;

SearchBar.tsx (скелет 3-го экрана):

import ...

type Props = {};

const SearchBar: React.FC<Props> = () => {
// logic to perform database query

  return (
    <View>
      <ScrollView>
        ... logic
        <SearchResult></SearchResult> // component that renders 3 cards
      </ScrollView>
    </View>
  );
};

export default SearchBar;

Card.tsx (карта предоставлена ​​SearchResult):

imports ...

type Props = {
  title: string;
  navigation: any;
};

const Card: React.FC<Props> = ({title, navigation}) => {
  return (
    <Content>
      <Card>
        <CardItem>
          <Right>
            <Button
              transparent
              onPress={() => navigation.navigate('Details')}>
              <Text>Mehr</Text>
            </Button>
          </Right>
        </CardItem>
      </Card>
    </Content>
  );
};

export default withNavigation(Card);

И, наконец, экран Details вместе с Content. Здесь заголовок из первого StackNavigator должен быть скрыт.

imports ...

type Props = {};

const Details: React.FC<Props> = ({}) => {
  return (
    <View>
      <Content></Content>
    </View>
  );
};

export default Details;

imports ...

type Props = {
  navigation: any;
};

class Content extends React.Component {
  state = {
    showHeader: false,
  };

  static navigationOptions = ({navigation}) => {
    const {params} = navigation.state;
    return params;
  };

  hideHeader = (hide: boolean) => {
    this.props.navigation.setParams({
      headerShown: !hide,
    });
    console.log('props ', this.props.navigation);
  };
  render() {        
    return (
      <View>
        <View>
        </View>
        <Button
          title={'Press me and the header will disappear!'}
          onPress={() => {
            this.setState({showHeader: !this.state.showHeader}, () =>
              this.hideHeader(this.state.showHeader),
            );
          }}
        />
      </View>
    );
  }
}

export default withNavigation(CardExtended);

Может быть, у кого-то есть идея?