React native 如何在React Native中添加汉堡图标菜单

我对react native中的导航相当陌生，但我已经能够在这里学到一些东西，现在我想在其中添加汉堡图标，以创建一个合适的菜单栏。因为我对这方面还不太熟悉，所以我在各个方面都需要帮助

我的代码看起来像这样

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

class Home extends React.Component{
  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}来自'React'；
从“react native”导入{视图、文本、图像、样式表}；
从“react navigation”导入{createAppContainer}；
从“react navigation drawer”导入{createDrawerNavigator}；
类Home扩展了React.Component{
静态导航选项={
抽屉标签：“家”，
抽屉图标：（{tintColor}）=>(
),
};
render（）
{
返回(
欢迎来到主屏幕
);
}
}
类概要文件扩展了React.Component{
静态导航选项={
抽屉标签：“配置文件”，
抽屉图标：（{tintColor}）=>(
),
};
render（）
{
返回(
欢迎来到个人资料屏幕
);
}
}
类设置扩展了React.Component{
静态导航选项={
抽屉标签：“设置”，
抽屉图标：（{tintColor}）=>(
),
};
render（）
{
返回(
欢迎来到设置屏幕
);
}
}
const MyDrawerNavigator=createDrawerNavigator({
主页：{
屏幕：主页
},
设置：{
屏幕：设置
},
简介：{
屏幕：配置文件
},
});
const MyApp=createAppContainer（myDrainerNavigator）；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
图标：{
宽度：24，
身高：24，
},
});

---

就像我想用一些抽屉导航uri来做一样，但是如何开始是主要的问题，因此我想知道如何做以及必须做什么。

我总是更喜欢制作自己的自定义组件，而不是任何库

很简单，首先下载像这样的图标或您的图标并创建一个视图框，然后在图像上添加可触摸的不透明度，这样当用户单击时，它将展开

会变成这样吗

现在步骤是这样的,

renderUnExpanded=()=>(
<View>
   <TouchableOpacity onPress = {this.flipState} >
     <Icon />
   </TouchableOpacity>
<View>
)

renderExpanded = () =>(

<View>
   <TouchableOpacity onPress = {this.flipState} >
     <Icon />
   </TouchableOpacity>
   <ProfileIcon />
   <SignoutIcon />
<View>

)

现在在渲染函数中，根据状态显示

render(){

return(
{this.state.optionVisible?this.renderExpanded():this.renderUnExpanded()}
)
}

---

希望它清楚，否则问任何疑问

你是说我必须把它作为一门课？比如说类HamburgerManu扩展了React.Component？或者确切地说是吗？是的，就像那样，无论你想在哪里使用它，就像，

render(){

return(
{this.state.optionVisible?this.renderExpanded():this.renderUnExpanded()}
)
}