React Native - 堆栈导航器中的多个选项卡导航器

Question

我想在Stack Navigator中使用Tab Navigator使用Tab Navigator和页脚显示标题。我分别创建了页眉和页脚屏幕，如下所示。附上我的代码如下。

我按预期看到标题部分，但没有显示页脚部分。

#Footer

const footerNav = TabNavigator({
TabItem1: {
    screen: screen1,
    navigationOptions: {
        tabBarLabel:"Tab1",
    }
},
TabItem2: {
    screen: screen2,
    navigationOptions: {
        tabBarLabel:"Tab2",
    }
}
},
{
    tabBarOptions: {
        activeTintColor: '#222',
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
});

#Header

const headerNav = TabNavigator({
TabItem1: {
    screen: stackNav,
    navigationOptions: {
        tabBarLabel:"home",
    }
},
TabItem2: {
    screen: stackNav,
    navigationOptions: {
        tabBarLabel:"calendar",
    }
}

 }, {
  animationEnabled: false,
  swipeEnabled: false,
});

#App.js

const AppNavigator =
StackNavigator(
    {
      screen: footerNav,
      screen: headerNav,
    },
);
export default class App extends Component {
  render() {
    return (
      <AppNavigator/>
   );
  }

}