Question

当我向右轻扫抽屉打开但我想使用页眉中的按钮将其打开时，我编写了代码，但未定义此错误不是对象（评估“ 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;

这就是我的应用程序代码：

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

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

1 个答案: