Реагирующая навигация: как использовать дополнительный StackNavigator во вложенном компоненте?

Question

В моем проекте React Native для Android я использую React Navigation. Существует целевая страница, содержащая StackNavigator, позволяющая пользователю переходить на два разных экрана нажатием кнопки.

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

Теперь вот проблема: компонент карты содержит кнопку с именем «Показать больше». Нажатие на эту кнопку должно перейти к новому экрану Details Screen. Я не могу заставить это работать, даже после поиска StackOverflow, GitHub и docs .

Вот что у меня есть:

App.tsx:

import React from "react";
import { Image, View } from "react-native";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

import DatabaseSearch from "./src/screens/DatabaseSearch/DatabaseSearch";
import LandingPage from "./src/screens/LandingPage/LandingPage";
import DetailsScreen from "./src/screens/DetailsScreen/DetailsScreen";

class RootComponent extends React.Component {
  render() {
    return (
      <View>
        <LandingPage />
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    LandingPage: {
      screen: RootComponent
    },
    DatabaseSearch: {
      screen: DatabaseSearch
    },
    About: {
      screen: About
    },
    DetailsScreen: {
      // is it correct to register the screen here?
      screen: DetailsScreen
    }
  },
  {
    initialRouteName: "LandingPage"
  }
);

const AppContainer = createAppContainer(RootStack);

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

И LandingPage.tsx:

import React from "react";
import { View, Text } from "react-native";
import { withNavigation } from "react-navigation";

import ButtonNavigate from "../../components/atoms/ButtonNavigate/ButtonNavigate";

type Props = {};

const LandingPage: React.FC<Props> = ({}) => {
  return (
    <View>
      <View>
        <ButtonNavigate navigateTo="DatabaseSearch" />
      </View>
      <View>
        <ButtonNavigate navigateTo="About" />
      </View>
    </View>
  );
};

export default withNavigation(LandingPage);

Это компонент DatabaseSearch.tsx, который содержит CardComponent.tsx:

import React from 'react';
import {View, Text, ScrollView} from 'react-native';
import {withNavigation} from 'react-navigation';

import ...

type Props = {
  text: string;
};

const DatabaseSearch: React.FC<Props> = ({text}) => {
// database query logic

    return (
      <View>
        <ScrollView>
          <CardComponent result={resultValue}></CardComponent >
        </ScrollView>
      </View>
    );
};

export default DatabaseSearch;

Наконец, CardComponent.tsx сам, содержащий кнопку «Показать больше»:

import React, {Component} from 'react';
import {Image, View} from 'react-native';
import {withNavigation} from 'react-navigation';
imports ...

type Props = {
  navigation: any;
};

const CardComponent: React.FC<Props> = ({navigation}) => {
  return (
    <Content>
      <Card>
        <CardItem>
          <Right>
            <Button transparent onPress={() => navigation.navigate('DetailsScreen')}>
              <Text style={styles.buttonText}>Show More</Text>
            </Button>
          </Right>
        </CardItem>
      </Card>
    </Content>
  );
};

export default withNavigation(CardComponent);

Как видите, я попытался зарегистрировать DetailsScreen в основном StackNavigator и в CardComponent, я использовал withNavigation, чтобы получить доступ к свойству navigation. Это решение работает с кнопками, расположенными прямо в LandingPage. Но в CardComponent этого не происходит.

Что я делаю не так?