当我点击图标时打开抽屉反应导航版本 5 [英] Open the drawer when I click the icon react navigation version 5

问题描述

当我点击 headerLeft 部分的图标时，我想打开抽屉，我也尝试过 this.props.navigation.dispatch 但它给出了一个错误，navigation.dispatch 也给出了错误

I want to open the drawer when I click the icon in the headerLeft part, I also have try to this.props.navigation.dispatch but is gives an error also navigation.dispatch gives error

下面的代码不会出错，但不会打开抽屉

The code below does not gives errors but is does not open the drawer

import { DrawerActions } from '@react-navigation/native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

export default class App extends Component {

  createHomeStack = () =>
    <Stack.Navigator>
      <Stack.Screen
      initialRouteName="login"
      headerMode="screen"
        name="main"
        children={ this.createBottomTabs}
        options={{
          title: "Fitbit",
         headerLeft: () => (

            <Icon
              name="menu"
              size={25}
              color="#D4AF37"
              onPress={() => {DrawerActions.openDrawer()  }}
            />

          )} } />

    </Stack.Navigator>

  createDrawer = ({navigation}) =>

    <Drawer.Navigator initialRouteName="Main" >

      <Drawer.Screen name="Main" component={Main} />
      <Drawer.Screen name="Contacts" component={Food} />>
    </Drawer.Navigator>

  render() {
    return ( 
  <NavigationContainer>
        {this.createHomeStack()}
     </NavigationContainer>

    );
  }
}

推荐答案

为了实现这一点，您需要按照文档中的说明将堆栈包装到抽屉中.

In order to achieve that you need to wrap the stack into the drawer as the documentation says.

文档在这里

我可能会使用这样的东西:

I would probably use something like this:

添加完整代码

import React,{Component} from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { createStackNavigator } from '@react-navigation/stack'
import { View } from 'react-native'
import Icon from 'react-native-vector-icons/dist/Feather'
const Drawer = createDrawerNavigator()
const Stack = createStackNavigator()

const Main = () => <View></View>
const Food = () => <View></View>

const Home = ({ navigation }) => (
    <Stack.Navigator>
        <Stack.Screen name="Main" component={Main} options={{
            headerLeft: () => <Icon
                name="menu"
                size={25}
                color="#D4AF37"
                onPress={() => navigation.openDrawer()}
              />
      }} />
    </Stack.Navigator>
)


const DrawerNavigator = () => (
    <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Contacts" component={Food} />
      </Drawer.Navigator>
)

export default props => (
    <NavigationContainer>
        <DrawerNavigator />
    </NavigationContainer>
)

这篇关于当我点击图标时打开抽屉反应导航版本 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！