Вложенный switchNavigator внутри компонента с React Navigation

Question

Я застрял с вложенной навигационной системой. У меня есть основной навигатор (switchNavigator), и один из его экранов представляет собой компонент, внутри которого есть несколько представлений, а внутри одного из этих представлений я хочу установить другой навигатор (switchNavigator), но я получаю эту ошибку "The navigation prop is missing for this navigator. In react-navigation v3 and v4 you must set up your app container directly.". Я действительно не знаю, возможна ли это или допустимая реализация.

Это мой mainNavigator и два простых компонента, второй - где я называю вложенный навигатор:

import React from 'react';
import {createAppContainer,createSwitchNavigator} from 'react-navigation';
import { View, Text } from 'react-native';
import NestedNav from './nestedNav';

const FirstView = props=>{
  return(
    <View>
      <Text>First view</Text>
    </View>
  )
  }
  const secondView = props=>{
  return(

    <View>
      <View>
        <Text>Second view</Text>
      </View>
      <View>
        <NestedNav></NestedNav>
      </View>
      <View>
        <Text>some other ui content</Text>
      </View>
    </View>
  )
}
const MainNavigator = createSwitchNavigator(
  {
    firstView:FirstView,
    secondView:secondView
  },
  {
    initialRouteName: 'secondView',
  }
);
export default createAppContainer(MainNavigator)

И это мой NestedNavigator:

import React from 'react';
import {createAppContainer,createSwitchNavigator} from 'react-navigation';

const NestedNav = createSwitchNavigator(
  {
    firstView:SomeFirstViewInNestedNav,
    secondView:SomesecondViewInNestedNav
  },
  {
    initialRouteName: 'firstView',
  }
);
export default NestedNav

Answer 1

Я получил решение, мне просто нужно было создать статическую c ссылку на вложенный Навигационный маршрутизатор в моем компоненте вложенного контейнера навигатора (в примере компонента "secondView"): static router = NestedNav.router

И установите навигационную опору для вложенного навигатора: <NestedNav navigation = {this.props.navigation}></NestedNav>

Это решение находится в Документах: здесь

Answer 2

после рендеринга nestedNavigator он должен быть заключен в appContainer.

const NestedNav = createSwitchNavigator(
  {
    firstView:SomeFirstViewInNestedNav,
    secondView:SomesecondViewInNestedNav
  },
  {
    initialRouteName: 'firstView',
  }
);


--> export default createAppContainer(NestedNav)