时间戳

首页 > 解决方案 > 如何在 React-Native 中添加汉堡图标菜单

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

就像我想使用一些抽屉导航 uri 来做到这一点，但如何开始是主要的担心，因此我想知道我必须如何以及必须做什么。

标签： react-nativenavigation-drawer

解决方案

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

很简单，首先下载这样的图标或者你的图标并创建一个视图框，然后在图像上添加可触摸的不透明度，这样当用户点击时，它会展开
在此处输入图像描述

会变成这个

在此处输入图像描述

现在步骤是这样的，

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

renderExpanded = () =>(

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

)

现在 flipState 将是一个切换展开状态的函数，

flipState =() => {


this.setState({optionVisible:!this.state.optionVisible})
}

现在在渲染功能中，相应地显示状态，

render(){

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

希望清楚，否则提出任何疑问

推荐阅读