汉堡包图标拒绝在 react-native 中显示答案

【问题标题】：Hamburger icon refuses to show in react-native汉堡包图标拒绝在 react-native 中显示
【发布时间】：2019-11-29 12:54:27
【问题描述】：

所以我开始在 React-native 中使用 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 hamburger-menu

【解决方案1】：

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

根据文档，您需要创建StackNavigator。或者，您可以使用 <HamburgerIconMain/> 组件为主屏幕创建自己的标题。
像这样。

 render(){
    return(
      <View style={{flex:1, backgroundColor: 'green'}}>
        <View style={{backgroundColor: 'yellow', height: 40, justifyContent: 'center'}}>
          <Text> Header: add hamburger icon here </Text>
        </View>
        <View style={{flex: 1, backgroundColor: 'grey', justifyContent: 'center', alignItems: 'center'}}>
          <Text> Welcome to Home screen</Text>
        </View>
      </View>
    );
  }

但是这样的解决方案很好，以防万一，如果你想在一个屏幕上看到标题。

【讨论】：