将图标添加到 Stack Navigator Bar 以在 react-native 中打开抽屉导航器

Question

我正在尝试将菜单类型图标添加到我的堆栈导航器标题中，代码如下：

import React, { Component } from 'react';
import { createStackNavigator, HeaderTitle } from '@react-navigation/stack';
import Home from '../HomeComponent';
import Button from 'react-native';
import {Icon} from 'react-native-vector-icons';

const Stack = createStackNavigator()
class HomeNavigator extends Component{
    static navigationOptions ={
        title: 'Home',
        drawerLabel: ' Home'
    }
    render(){
        return(
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={Home} style={{backgroundColor: '#d1d9e3'}} 
                options={{ title:"Welcome to Mary-Mocks!", 
                headerLeft: () =>(<Icon name='ios-menu' type="ionicons" size={24} color='#fff' onPress={() => navigation.toggleDrawer()}/>), 
                headerTintColor: '#fff',  headerStyle:{ backgroundColor:'#512DA8'}}}/>        
            </Stack.Navigator>
  );
    }
}
export default HomeNavigator;

我也通过从react-native、react-native-vector-icons 和react-native-elements 导入“Icon”来尝试此代码，但它们都不适合我。我收到此错误：

我的环境如下：

    "@expo/vector-icons": "^10.2.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.0.1",
    "@react-navigation/core": "^5.1.0",
    "@react-navigation/drawer": "^5.0.1",
    "@react-navigation/material-bottom-tabs": "^5.0.3",
    "@react-navigation/material-top-tabs": "^5.0.1",
    "@react-navigation/native": "^5.7.0",
    "@react-navigation/stack": "^5.0.1",
    "expo": "~38.0.8",
    "expo-constants": "~9.1.1",
    "expo-status-bar": "^1.0.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-gesture-handler": "^0.0.4",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-elements": "^2.0.4",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-ionicons": "4.x",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "~3.0.7",
    "react-native-screens": "^2.9.0",
    "react-native-vector-icons": "^7.0.0",
    "react-native-video": "^4.4.5",
    "react-native-web": "~0.11.7"

Answer 1

删除图标周围的括号。应该是：

import Icon from 'react-native-vector-icons';