带有React Navigation的组件内的嵌套switchNavigator

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

当您渲染nestedNavigator时，它应该包装在appContainer中。

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


--> export default createAppContainer(NestedNav)