TypeError: undefined is not an object (evaluating '_this.props.navigation.openDrawer')

Question

我想创建一个可以调用导航抽屉的全局 Header

我的主要代码是这样的：

    import * as React from 'react';
    import { View, Text, Button, TouchableOpacity } from 'react-native';
    import { NavigationContainer } from '@react-navigation/native';
    import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList,DrawerItem, } from '@react-navigation/drawer';
    import Icon from 'react-native-vector-icons/FontAwesome5';
    import Header from './components/Headertest';
    
    function Screen1() {
      return (
        <View>    
        <View><Text>Screen1</Text></View>
        </View>
      );
    }
    
    function Screen2() {
      return (
        <View>    
        <View><Text>Screen2</Text></View>
        </View>
      );
    }
    
    const Drawer = createDrawerNavigator();
    
    function MyDrawer() {
      return (
        <Drawer.Navigator>
          <Drawer.Screen name="Screen1" component={Screen1} />
          <Drawer.Screen name="Screen2" component={Screen2} />
        </Drawer.Navigator>
      );
    }
    
    export default function App() {
      return (
        <NavigationContainer>
          <Header />
          <MyDrawer />      
        </NavigationContainer>
      );
    }

而我的Header代码是这样的：

import * as React from 'react';
import { View, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';

class Header extends React.Component {
  
  render() {    
    return(     
    <View style={{flexDirection: 'row', height:50, backgroundColor:'#12415e', marginTop: 25 }}>    
      <View style={{flex: 1, justifyContent: 'center', alignItems:'center',flexDirection: 'row' }}>
        <TouchableOpacity onPress={() => this.props.navigation.openDrawer()}>
          <Icon style= {{color: 'white'}} name='bars'/>
      </TouchableOpacity>
      </View>                
    </View>    
  )
  }  
}

export default Header;

但是出现这样的错误：

TypeError: undefined is not an object (evaluating '_this.props.navigation.openDrawer')

我的代码有什么问题？

Answer 1

<Header /> 组件不在 Navigator 内，因此它无法访问 navigation 道具。使 <Header /> 组件成为功能组件并使用 useNavigation() 挂钩。

此处有更多详细信息：https://reactnavigation.org/docs/connecting-navigation-prop

TypeError: undefined is not an object (evaluating '_this.props.navigation.openDrawer')

TypeError: undefined is not an object (evaluating '_this.props.navigation.openDrawer')

javascript

react-native

react-native-android