Используйте вложенные стековые навигаторы с функциональными компонентами

Question

Я пытаюсь повторить функциональность карт Google с их поведением нижнего листа. Я делаю это через react-native-interactable. Важно отметить, что я использую функциональные компоненты! Я использую react-navigation, и я пытаюсь разрешить нижнему листу изменять вид на себя, а также на основной вид карты и наоборот. Я попытался использовать два разных стека навигаторов, один для основного вида карты и один для нижнего листа. Я вложил их в дочерние компоненты . Поскольку это функциональные компоненты, static router = BottomSheetNavigator.router, как указано в документах , не работает с функциональными компонентами. Как я могу достичь того, что я собираюсь здесь?

Вот что у меня сейчас:

MainNavigator.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import { MapScreen } from '../mapScreen';

const MainNavigator = createStackNavigator(
  {
    Map: MapScreen,
    Detail: DetailScreen
  },
  {
    initialRouteName: 'Map',
    headerMode: 'none'
  }
);

export default createAppContainer(MainNavigator);

MapScreen.js

const MapScreen = props => {
  //do some other stuff here
  return (
    <View style={{ ...StyleSheet.absoluteFillObject }}>
      <MapView
        ref={mapRef}
        provider={PROVIDER_GOOGLE}
        showsUserLocation
        followUserLocation
        style={{ ...StyleSheet.absoluteFillObject }}
        onLayout={() => setReady(true)}
        onPress={() => dispatch({ type: REMOVEROUTE })}
        initialRegion={initialRegion}
      >
        {markers}
      </MapView>
      <MemoedUserLocationButton animateToRegion={animateToRegion} />
      <BannerAd />
      <BottomSheet navigation={props.navigation} />
    </View>
  );
};

BottomSheet.js

import React from 'react';
import { View, Dimensions, StyleSheet } from 'react-native';
import Interactable from 'react-native-interactable';
import BottomSheetNavigator from './BottomSheetNavigator';

const { height } = Dimensions.get('window');

const BottomSheet = props => {
  //I've been told to put 'static router = BottomSheetNavigator.route' here
  //But because it's not a class component, static doesn't work
  return (
    <View style={styles.panelContainer} pointerEvents={'box-none'}>
      <Interactable.View
        verticalOnly
        snapPoints={[{ y: height - (height * 0.35) }, { y: height - (height * 0.50) }]}
        boundaries={{ top: -400 }}
        initialPosition={{ y: 10 }}
      >
        <View style={styles.panel}>
          <View style={styles.panelHeader}>
            <View style={styles.panelHandle} />
          </View>
          <View style={styles.carousel}>
            <BottomSheetNavigator navigation={props.navigation} />
          </View>
        </View>
      </Interactable.View>
    </View>

  );
};

BottomSheetNavigator.js

import { createStackNavigator } from 'react-navigation-stack';
import FavoritesList from './FavoritesList';

const BottomNavigator = createStackNavigator(
  {
    Favorites: FavoritesList,
  },
  {
    initialRouteName: 'Favorites',
    headerMode: 'none'
  }
);

export default BottomNavigator;