汉堡图标拒绝在本机显示

Question

因此，我开始在React-native中使用Navigation，我真的很喜欢它，除了我在某种程度上使用Navigation陷入僵局。现在，这就是问题所在。

我希望使用汉堡包图标显示标题。因此，用户可以单击“汉堡包”图标，它在左侧显示菜单，用户可以在其中选择和执行任何任务，我尝试过，但它从未显示。

我的代码如下：

App.js

import React , {Component} from 'react';
import {  View, Text, Image , StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
import HamburgerIconMain from './HamburgerIcon/hamburgerIconMain';

class Home extends React.Component{
  static navigationOptions = () => {
    return{
      headerLeft:<HamburgerIconMain/>
    };
  };

  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={{uri:'http://imageholder.freeasphost.net/home.png'}}
        style={[styles.icon, { tintColor: tintColor }]}
      />
    ),
  };

  render()
  {
    return(
      <View>
        <Text> Welcome to Home screen</Text>
      </View>
    );
  }
}

class Profile extends React.Component{
  static navigationOptions = {
    drawerLabel: 'Profile',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={{uri:'http://imageholder.freeasphost.net/profile.png'}}
        style={[styles.icon, { tintColor: tintColor }]}
      />
    ),
  };
  render()
  {
    return(
      <View>
        <Text>Welcome to Profile screen</Text>
      </View>
    );
  }
}

class Settings extends React.Component{
  static navigationOptions = {
    drawerLabel: 'Settings',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={{uri:'http://imageholder.freeasphost.net/settings.png'}}
        style={[styles.icon, { tintColor: tintColor }]}
      />
    ),
  };
  render()
  {
    return(
      <View>
        <Text>Welcome to Settings Screen</Text>
      </View>
    );
  }
}

const MyDrawerNavigator = createDrawerNavigator({
  Home:{
    screen:Home
  },
  Settings:{
    screen:Settings
  },
  Profile:{
    screen:Profile
  },
});

const MyApp = createAppContainer(MyDrawerNavigator);

export default class App extends Component {

  render() {
    return (
        <MyApp/>  
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});

然后，“汉堡包”图标的代码如下所示：>

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 HamburgerIconMain extends React.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(HamburgerIconMain);
我现在担心的是，带有“汉堡包”图标的标题永远不会显示。如何以及如何解决此问题

因此，我开始在React-native中使用Navigation，我真的很喜欢它，除了我在某种程度上使用Navigation陷入僵局。现在，这里是担心的地方。我想要...

Answer 1

https://reactnavigation.org/docs/en/next/stack-navigator.html#docsNav