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);

这是我在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天的文档，却一无所获。

Answer 1

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

如何通过父级导航器的标题图标在子级导航器的屏幕中调用函数

1 个答案: