Header 左侧图标不会显示 React Native

Question

我是新来的反应和创建一个通过汉堡菜单路由的项目。 我的项目没有显示任何错误，但我无法显示汉堡菜单图标。 但是，如果我在屏幕上滑动，菜单会按预期出现。

我的 Portfolio.js 代码是：

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import HamburgerIcon from '../assets/HamburgerIcon';

export default class Portfolio extends Component {
    static navigationOptions = () => {
        return {
            headerLeft: <HamburgerIcon/>
        };
    };
    render() {
        return (
                <View style={styles.container}>
                    <Text style={styles.title}>Green Screen</Text>
                </View>
        );
    }
 }
  const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'green',
    },
    title: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    }
 });

HamburgerIcon.js 代码是：

import React, {Component} from 'react';
import { withNavigation } from 'react-navigation';
import { TouchableOpacity } from "react-native-gesture-handler";
import Icon from 'react-native-vector-icons/SimpleLineIcons';

class HamburgerIcon extends Component{
    render() {
    return (
        <TouchableOpacity
        style={{
            width: 44,
            height: 44,
            marginLeft: 20
        }}
        onPress={()=>{
            this.props.navigation.openDrawer();
        }}>
            <Icon name='menu' size={20} color='black'/>
        </TouchableOpacity>
    )
    };
}
export default withNavigation(HamburgerIcon);

编辑：

NavigationBar.js 代码如下：

import { createDrawerNavigator} from 'react-navigation-drawer'; 
import { createAppContainer } from "react-navigation";
import HomePage from '../Pages/HomePage';
import Portfolio from '../Pages/Portfolio';


const HamburgerNavigation = createDrawerNavigator(
    {
        Portfolio: Portfolio,
        HomePage: {
            screen: HomePage,
        }
    },
    {
        initialRouteName: 'HomePage',
        
    }
);
export default createAppContainer(HamburgerNavigation);

有人可以帮我让图标显示吗？

Answer 1

static navigationOptions = ({ navigation }) => ({
    header: (
      <View style={{flex:0, 
            flexDirection: 'row', 
            justifyContent: 'flex-start'
      }}>
          <HamburgerIcon/>
      </View>
    )
  });

if your using react-native element refer this https://react-native-elements.github.io/react-native-elements/docs/header.html

Answer 2

我最终不得不使用 Appbar 组件，因为 navigationOptions 仅在您使用 StackNavigator 时才有效，而不是像我一样使用 DrawerNavigator