打开标题按钮上的导航抽屉单击

Question

当我向右滑动我的抽屉打开但我想使用标题中的按钮打开它时我做了一个代码但我有这个错误 undefined is not a object (evaluating 'navigation.openDrawer') 这就是我的 app.js 代码：

import {createStackNavigator} from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from './components/login'
import Inscription from './components/inscription'
import signup from './components/signup'
import mp from './components/motdepasse'
import ch from './components/choice'
import mn from './components/menu1'
import drawer from './components/drawerapp'
import React, { Component } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity,  } from 'react-native';
import Icon from 'react-native-vector-icons/Entypo'


const Navigator = createStackNavigator({
  Home:{screen: Home},
  Profil:{screen: Inscription},
  signup:{screen: signup, navigationOptions: { header: null }},
  mp:{screen: mp},
  ch:{screen: ch},
  mn:{screen: mn},
  drawer:{screen: drawer,navigationOptions: { title:"votre travail",
  headerStyle:{backgroundColor:'#8B0000'},
  headerTitleStyle: {
     fontWeight: 'bold',
     color:'white',         
   },
   headerLeft: ({ navigation }) => (
     <TouchableOpacity onPress={() => navigation.openDrawer()} >
      <Icon name={'menu'} size={28} color={'white'} style={{marginRight:10}}/>
      </TouchableOpacity> 
   ),}},

}
);


const App = createAppContainer(Navigator);
export default App;

这是我的 appdrawer 代码：

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label="Help" onPress={() => alert('Link to help')} />
      <DrawerItem
        label="Close drawer"
        onPress={() => props.navigation.closeDrawer()}
      />
    </DrawerContentScrollView>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}>
      <Drawer.Screen name="Feed" component={mn} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

export default class drawerapp extends React.Component {

  render(){
    const {navigate} = this.props.navigation;

  return (

    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}}

我的工作非常好，直到我单击左侧标题按钮并出现错误

Answer 1

你在错误的地方获取了导航道具，headerLeft 没有提供导航道具，所以你必须从 navigationOptions 中获取它...

如下更改导航器代码..

const Navigator = createStackNavigator({
  Home:{screen: Home},
  Profil:{screen: Inscription},
  signup:{screen: signup, navigationOptions: { header: null }},
  mp:{screen: mp},
  ch:{screen: ch},
  mn:{screen: mn},
  drawer:{screen: drawer,
  navigationOptions: ({navigation}) => ({ 
    title:"votre travail",
    headerStyle:{backgroundColor:'#8B0000'},
    headerTitleStyle: {
      fontWeight: 'bold',
      color:'white',         
    },
    headerLeft: () => (
      <TouchableOpacity onPress={() => navigation.openDrawer()} >
        <Icon name={'menu'} size={28} color={'white'} style={{marginRight:10}}/>
      </TouchableOpacity> 
     ),
    }),
  },
});