我正在使用反应导航。我的顶级导航器是StackNavigator。在此StackNavigator中，我有一个嵌套的DrawerNavigator。我确实想要此实现，因为我不希望导航抽屉与标题重叠。

在StackNavigator中，我在标题中放置了一个图标（headerRight）。我有一个MapView作为嵌套DrawerNavigator中的第一个屏幕路线。我想在按下该图标时缩放到用户的当前位置（在上下文中全局保存）。

我不知道该怎么做。为了使其正常工作，我需要从图标的onPress引用MapView，以便可以缩放到特定位置。我不希望DrawerNavigator成为我的顶级导航员。我能做什么？这是我的导航器的代码：

const DrawerNavigator = createDrawerNavigator({
    "Search Locations": {
        screen: (props) => (
            <CurrentLocationProvider>
                <BusinessLocationsProvider>
                    <SearchLocationsScreen {...props}/>
                </BusinessLocationsProvider>
            </CurrentLocationProvider>
        ),},"About": {
        screen: AboutScreen,"Favorites": {
        screen: FavoritesScreen
    },"Profile": {
        screen: ProfileScreen
    },"Issues": {
        screen: ReportIssueScreen
    }
},{
    contentComponent: props => <CustomDrawerComponent {...props} />,});


const MainStackNavigator = createStackNavigator({
    DrawerNavigator: {
        screen: DrawerNavigator,"Checkin": {
        screen: CheckInScreen,"Confirmation": {
        screen: (props) => (
            <CurrentLocationProvider>
                <CheckInconfirmationScreen {...props}/>
            </CurrentLocationProvider>
        ),navigationOptions: {
            header: null,}
    }

},{
    defaultNavigationOptions: ({navigation}) => configureNavigationOptions(navigation)
});

const LoadingNavigator = createSwitchNavigator({
    "LoadingScreen": LoadingScreen,MainStackNavigator: MainStackNavigator,{
    initialRouteName: "LoadingScreen",});

export default createAppContainer(LoadingNavigator);

这是我在defaultNavigationOptions中为StackNavigator使用的配置：

export default (navigation) => {
    const {state} = navigation;
    let navOptions = {};

    // navOptions.header = null;

    navOptions.headerTitle = <Text style={styles.headerTitle}>Nail-Queue</Text>;
    navOptions.headerStyle = {
        backgroundColor: colors.primary
    };

    if (state.index === 0) {
        navOptions.headerRight = (
            <TouchableOpacity onPress={() => {

            }}>
                <MaterialIcons
                    name="my-location"
                    size={32}
                    color="#fff"
                    style={{paddingRight: 10}}
                />
            </TouchableOpacity>
        )
    }

    if (state.isDrawerOpen) {
        navOptions.headerLeft = (
            <>
                <StatusBar barStyle='light-content'/>
                <TouchableOpacity onPress={() => {
                    navigation.dispatch(Draweractions.toggleDrawer())
                }}>
                    <Ionicons name="ios-close" style={styles.menuClose} size={38} color={'#fff'}/>
                </TouchableOpacity>
            </>
        )
    } else {
        navOptions.headerLeft = (
            <>
                <StatusBar barStyle='light-content'/>
                <TouchableOpacity onPress={() => {
                    navigation.dispatch(Draweractions.toggleDrawer())
                }}>
                    <Ionicons name="ios-menu" style={styles.menuOpen} size={32} color={'#fff'}/>
                </TouchableOpacity>
            </>
        )
    }
    return navOptions;
};

执行这样的基本操作并不难，但是我已经阅读了2天的文档，却一无所获。