如何从父导航器的标题图标调用子导航器屏幕中的函数

Question

我正在使用反应导航。我的顶级导航员是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);

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

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 天的文档，但一无所获。

Answer 1

使用全局变量存储地图视图参考值，并在自定义标题组件中访问该参考以缩放到您的位置。