时间戳

首页 > 解决方案 > 汉堡包图标拒绝在 react-native 中显示

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

问题描述

所以我开始在 React-native 中玩 Navigation，我真的很喜欢它，除了我在以某种方式使用导航时遇到了死锁。现在担心的是。

我希望使用汉堡包图标显示标题。所以用户可以点击汉堡图标，它会在左侧显示菜单，用户可以在其中选择和执行任何任务，我试过了，它永远不会出现。

我的代码看起来是这样的：

应用程序.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-nativehamburger-menu

解决方案

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>
    );
  }

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

推荐阅读