Как вызвать функцию на экране дочернего навигатора из значка заголовка родительского навигатора - PullRequest
Новая
       12

Как вызвать функцию на экране дочернего навигатора из значка заголовка родительского навигатора

1 голос
/ 06 ноября 2019

Я использую реагирующую навигацию. Мой навигатор верхнего уровня - StackNavigator. В этом StackNavigator у меня есть вложенное DrawerNavigator. Я действительно хочу эту реализацию, потому что я не хочу, чтобы Navigation Drawer перекрывал заголовок.

В StackNavigator я поместил значок (headerRight) в шапке. У меня MapView как первый экранный маршрут во вложенном DrawerNavigator. Я хочу увеличить текущее местоположение пользователя (которое хранится глобально в контексте) при нажатии значка.

Я не могу понять, как это сделать. Для того, чтобы он работал, мне понадобится ссылка MapView из значка onPress, чтобы я мог увеличивать масштаб до определенного места. Я не хочу, чтобы 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 дня читаю документацию и ничего не получаю.

1 Ответ

0 голосов
/ 08 ноября 2019

Используйте глобальную переменную, чтобы сохранить значение ссылки на вид карты и получить доступ к этой ссылке в своем пользовательском компоненте заголовка, чтобы увеличить свое положение.

...