Есть возможность использовать navigation.toggleDrawer () в настройках навигации - PullRequest
Новая
       116

Есть возможность использовать navigation.toggleDrawer () в настройках навигации

0 голосов
/ 21 апреля 2020

В моем файле навигации, когда я хочу переключить ящик, появляется следующая ошибка:

TypeError: navigation.openDrawer не является функцией. (В 'navigation.openDrawer ()', ' navigation.openDrawer 'не определено)

Это мой ящик: 

const DrawerNavigator = () => {
    return (
        <Drawer.Navigator
            initialRouteName="MYSHIFT"
        >
            <Drawer.Screen name="MYSHIFT" component={TopTabNavigator} />
        </Drawer.Navigator>
    )
}

И это мой контейнер навигации: 

const CareworkerNavigation = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>

                <Stack.Screen
                    name="Login"
                    component={LoginScreen}
                    options={{ headerShown: false }} />

                <Stack.Screen
                    name="Main"
                    options={({ navigation }) => {
                        return {
                            headerLeft: () => <Button title="LEFT BUTTON" onPress={() => {
                                navigation.toggleDrawer(); // <--- this line throws an error 
                            }} />
                        }
                    }}
                    component={DrawerNavigator} />

            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default CareworkerNavigation

Почему я не могу использовать navigation.toggleDrawer () в настройках навигации? Возможно ли устранить эту проблему?

Ответы [ 2 ]

1 голос
/ 21 апреля 2020

Если вы проверяете документы React Navigation, «вам нужно сделать навигатор ящика родителем любого навигатора, где ящик должен отображаться поверх его интерфейса».

React Navigation docs ссылка

Чтобы ответить на ваш вопрос: да, это возможно.

И вот у вас есть рабочий пример: 

import React from 'react'
import { Button, View } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { createStackNavigator } from '@react-navigation/stack'

const Feed = () => <View />
const Notifications = () => <View />
const Profile = () => <View />

const FeedStack = createStackNavigator()

const Home = ({ navigation }) => (
    <FeedStack.Navigator>
        <FeedStack.Screen
            name="Feed"
            component={Feed}
            options={props => {
                const { toggleDrawer } = props.navigation // <-- drawer's navigation (not from stack)
                return {
                    headerLeft: () => <Button title="LEFT BUTTON" onPress={toggleDrawer} />
                }
            }}
        />
    </FeedStack.Navigator>
)

const Drawer = createDrawerNavigator()

export default props => {
  return (
    <NavigationContainer>
        <Drawer.Navigator initialRouteName="Feed">
          <Drawer.Screen
            name="Feed"
            component={Home}
            options={{ drawerLabel: 'Home' }}
          />
          <Drawer.Screen
            name="Notifications"
            component={Notifications}
            options={{ drawerLabel: 'Updates' }}
          />
          <Drawer.Screen
            name="Profile"
            component={Profile}
            options={{ drawerLabel: 'Profile' }}
          />
        </Drawer.Navigator>
    </NavigationContainer>
  )
}
0 голосов
/ 21 апреля 2020

При построении navigation в options вы ссылаетесь на navigation стека, который не может выполнять действия рисования, попробуйте построить его на самом заголовке 

            <Stack.Screen
                name="Main"
                options={() => {
                    return {
                        headerLeft: (navigation) => <Button title="LEFT BUTTON" onPress={() => {
                            navigation.toggleDrawer(); // <--- this line throws an error 
                        }} />
                    }
                }}
                component={DrawerNavigator} />

https://github.com/react-navigation/react-navigation/issues/55

...