React Native中的嵌套导航

Question

我正在努力解决嵌套导航的概念。 我将描述我要实现的目标，并附上代码片段。 我将SettingsNavigator呈现为我的主要应用程序，该导航器包括设置页面和标签导航， 选项卡导航包括2个常规组件，另一个是另一个堆栈导航器。 我希望隐藏所有嵌套的导航器标题，但第一个堆栈导航器中的标题除外。 我想从该导航器标题中控制和管理我的应用状态。

实现此目标的最佳方法是什么？我在做什么错了？

Navigation.js

const ProceedToCheckout = createStackNavigator({
    Map: {
        screen: (props) => (<Map {...props} />),
    },
    Checkout: {
        screen: ({ navigation }) => (<Checkout navigation={navigation} />)
    }
},
    {
        initialRouteName: 'Map',
        headerMode: 'none',
        navigationOptions: {
            headerVisible: false,
        }
    });

const AppTabNav = createMaterialTopTabNavigator({
    Past: {
        screen: (props) => (<PreviousDeliveries {...props} />),
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (<Icon name="history" size={24} color={tintColor}></Icon>)
        }
    },
    Deliveries: {
        screen: (props) => (<ProceedToCheckout screenProps={{ ...props.screenProps }} />),
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (<Icon name="map" size={24} color={tintColor}></Icon>)
        }
    },
    Profile: {
        screen: props => (<Profile {...props} store={infoStore} />),
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (<Icon name="user" size={24} color={tintColor}></Icon>)
        }
    },
}, {
        initialRouteName: 'Profile',
        tabBarPosition: 'bottom',
        tabBarOptions: {
            indicatorStyle: {
                backgroundColor: COLORS.SECONDARY,
            },
            activeTintColor: COLORS.TEXT_PRIMARY,
            showIcon: true,
            style: {
                backgroundColor: COLORS.PRIMARY_DARK
            },
        },
    });


const SettingsNavigator = createStackNavigator({
    AppTabNav: {
        screen: AppTabNav,
        navigationOptions: ({ navigation }) => ({
            header: <Topnav navigation={navigation} />,
        })
    },
    Settings: {
        screen: ({ props, screenProps }) => (<Settings state={infoStore} {...props} />),
        })
    }
},
    {
        initialRouteName: 'AppTabNav',
        headerMode: 'float'
    });

App.js

const App = () => (<SettingsNavigator/>);