阵营本地操作栏和反应机菜单

我是新来的阵营本地和喜欢它至今。我正尝试创建一个屏幕（用于跨平台应用程序），右上角有一个菜单图标，点击时我想打开一个菜单，希望通过react-native-menu显示“注销”和“帐户”菜单选项。在这之后不得不花时间弄清楚如何调用菜单。感谢任何帮助。阵营本地操作栏和反应机菜单

import React, { Component } from 'react'; 
import { 
     AppRegistry, 
     StyleSheet, 
     View, 
} from 'react-native'; 
import ActionBar from 'react-native-action-bar'; 


export test class Main extends Component { 

render() { 

    return (
      <View style={styles.screen}> 
      <ActionBar 
      containerStyle={styles.bar} 
      backgroundColor='#33cc33' 
      rightIcons={[ 
         { 
         name: 'menu', 
         onPress:() => console.log('menu clicked'), 
         }, 
         ]} 
      /> 
      </View> 



           ); 
    } 
    } 


const styles = StyleSheet.create({ 
          screen: { 
          backgroundColor: '#33cc33', 
          flex: 1, 
          paddingTop: 10, 
          alignItems: 'center', 
          //padding: 10 
          }, 

          }); 

AppRegistry.registerComponent('Main',() => Main);

来源

2017-08-02 CNK2343

嗨，我使用[这个库]（https://github.com/react-native-community/react-native-drawer-layout）在'ReactNative'上创建组件菜单。也许你也可以尝试。 – muhammadaa

我尝试用你的情况来完成，我增加对创建菜单抽屉布局库react-native-drawer-layout。你可以在this找到安装。

步骤1 - 创建菜单列表（我创建了一个独立的，使其更容易，当我想要添加另一个菜单），它是内容仅供ArrayList中。我打电话给该文件Constants，并且可以在Constants.js这样写：

export const MENU_LIST = [ 
 
    { index: 1, name: 'Action' }, 
 
    { index: 2, name: 'Sign Out' }, 
 
]

步骤2 - 创建菜单组件用于显示菜单列表。在Menu.js你写这样的：

import React, { Component } from 'react'; 
 
import { View, ScrollView, Text, TouchableOpacity } from 'react-native'; 
 

 
const menuList = require('./Constants.js'); 
 

 
export default class Menu extends Component { 
 
    render() { 
 
    return (
 
     <View style={{ flex:1, backgroundColor: '#33cc33'}}> 
 
     <ScrollView> 
 
      {menuList.MENU_LIST.map(item => (
 
      <TouchableOpacity 
 
       key={item.index} 
 
       onPress={() => console.log('entered menu')} 
 
      > 
 
       <Text style={{color: 'white', fontSize: 16, paddingLeft: 20, paddingTop: 16}}>{item.name}</Text> 
 
      </TouchableOpacity> 
 
     ))} 
 
     </ScrollView> 
 
     </View> 
 
    ); 
 
    } 
 
}

步骤3 - 重构主要成分，如：

import React, { Component } from 'react'; 
 
import { AppRegistry, StyleSheet, View } from 'react-native'; 
 
import ActionBar from 'react-native-action-bar'; 
 
import DrawerLayout from 'react-native-drawer-layout'; 
 

 
import Menu from './Menu'; 
 

 
export default class App extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     drawerClosed: true, 
 
    }; 
 
    this.toggleDrawer = this.toggleDrawer.bind(this); 
 
    this.setDrawerState = this.setDrawerState.bind(this); 
 
    } 
 

 
    setDrawerState() { 
 
    this.setState({ 
 
     drawerClosed: !this.state.drawerClosed, 
 
    }); 
 
    } 
 

 
    toggleDrawer =() => { 
 
    if (this.state.drawerClosed) { 
 
     this.DRAWER.openDrawer(); 
 
    } else { 
 
     this.DRAWER.closeDrawer(); 
 
    } 
 
    } 
 

 
    render() { 
 
    return (
 
     <DrawerLayout 
 
     drawerWidth={300} 
 
     ref={drawerElement => { 
 
      this.DRAWER = drawerElement; 
 
     }} 
 
     drawerPosition={DrawerLayout.positions.left} 
 
     onDrawerOpen={this.setDrawerState} 
 
     onDrawerClose={this.setDrawerState} 
 
     renderNavigationView={() => <Menu />} 
 
     > 
 
     <ActionBar 
 
      containerStyle={styles.bar} 
 
      backgroundColor="#33cc33" 
 
      leftIconName={'menu'} 
 
      onLeftPress={this.toggleDrawer}/> 
 

 
     </DrawerLayout> 
 
    ); 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 
    screen: { 
 
    backgroundColor: '#33cc33', 
 
    flex: 1, 
 
    paddingTop: 10, 
 
    alignItems: 'center', 
 
    //padding: 10 
 
    }, 
 
}); 
 

 
AppRegistry.registerComponent('Main',() => App);

在我的模拟器，它会显示一个类似：

，当我的点击菜单图标，即会显示如下：

UPDATE-1：

如果你想不组件抽屉菜单填充直到底部，你可以在组件<Menu />风格发挥，我给包装的保证金如：

const styles = StyleSheet.create({ 
 
    wrapper: { 
 
    backgroundColor: '#33cc33', 
 
    marginTop: 50, 
 

 
    }, 
 

 
    listMenu: { 
 
    color: 'white', 
 
    fontSize: 16, 
 
    paddingLeft: 20, 
 
    paddingTop: 12, 
 
    paddingBottom: 12, 
 
    } 
 

 
});

而且在<Menu />添加样式组件，如：在Menu.js

export default class Menu extends Component { 
 
    render() { 
 
    return (
 
     <View style={styles.wrapper}> //add style wrapper 
 
     <ScrollView> 
 
      {menuList.MENU_LIST.map(item => (
 
      <TouchableOpacity 
 
       key={item.index} 
 
       onPress={() => console.log('entered menu')} 
 
      > 
 
       <Text style={styles.listMenu}>{item.name}</Text> //add style menu 
 
      </TouchableOpacity> 
 
     ))} 
 
     </ScrollView> 
 
     </View> 
 
    ); 
 
    } 
 
}

的完整代码，如：

import React, { Component, PropTypes } from 'react'; 
 
import { View, ScrollView, Text, TouchableOpacity, Image, StyleSheet } from 'react-native'; 
 
import Icon from 'react-native-vector-icons/MaterialIcons'; 
 

 
const menuList = require('./Constants.js'); 
 

 
export default class Menu extends Component { 
 
    render() { 
 
    return (
 
     <View style={styles.wrapper}> 
 
     <ScrollView> 
 
      {menuList.MENU_LIST.map(item => (
 
      <TouchableOpacity 
 
       key={item.index} 
 
       onPress={() => console.log('entered menu')} 
 
      > 
 
       <Text style={styles.listMenu}>{item.name}</Text> 
 
      </TouchableOpacity> 
 
     ))} 
 
     </ScrollView> 
 
     </View> 
 
    ); 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 
    wrapper: { 
 
    backgroundColor: '#33cc33', 
 
    marginTop: 50, 
 

 
    }, 
 

 
    listMenu: { 
 
    color: 'white', 
 
    fontSize: 16, 
 
    paddingLeft: 20, 
 
    paddingTop: 12, 
 
    paddingBottom: 12, 
 
    } 
 

 
});

而结果一样：

UPDATE-2：

基于在评论你的情况

，如果你想改变位置menu在右边。您必须先更换抽屉的位置。

其实：

我抽屉设置在屏幕和现在的位置是一半在左。您可以在main文件中看到这样的：

render() { 
 
    return (
 
     <DrawerLayout 
 
     
 
     /* This for set width drawer */ 
 
     
 
     drawerWidth={300} 
 

 
     /* end */ 
 

 
     ref={drawerElement => { 
 
      this.DRAWER = drawerElement; 
 
     }} 
 

 
     /* This for set position drawer */ 
 

 
     drawerPosition={DrawerLayout.positions.left} 
 

 
     /* end */ 
 

 
     onDrawerOpen={this.setDrawerState} 
 
     onDrawerClose={this.setDrawerState} 
 
     renderNavigationView={() => <Menu />} 
 
     > 
 
     <ActionBar 
 
      containerStyle={styles.bar} 
 
      backgroundColor="#33cc33" 
 
      leftIconName={'menu'} 
 
      onLeftPress={this.toggleDrawer} 
 
      
 
     /> 
 

 
     </DrawerLayout> 
 
    ); 
 
    }

Hopelly：

我设置在右边的菜单选项。你只需要改变位置抽屉一样：

render() { 
 
    return (
 
     <DrawerLayout 
 
     drawerWidth={300} 
 
     ref={drawerElement => { 
 
      this.DRAWER = drawerElement; 
 
     }} 
 
     
 
     // i change the position to the right. 
 
     drawerPosition={DrawerLayout.positions.Right} 
 
     
 
     onDrawerOpen={this.setDrawerState} 
 
     onDrawerClose={this.setDrawerState} 
 
     renderNavigationView={() => <Menu />} 
 
     > 
 
     <ActionBar 
 
      containerStyle={styles.bar} 
 
      backgroundColor="#33cc33" 
 
      rightIcons={[ 
 
      { 
 
       name: 'menu', 
 
       onPress: this.toggleDrawer, 
 
      }, 
 
      ]} 
 
     /> 
 

 
     </DrawerLayout> 
 
    ); 
 
    }

，如果你想了解DrawerLayout在Android上，你可以阅读文档

。

API DrawerLayoutAndroid

的情况下，我的模拟器展示，如：

我希望我的回答可以帮助你，给你换个思路来发展自己的应用。战斗...;））

来源

2017-08-02 09:30:22 muhammadaa

非常感谢。好例子！由于抽屉从上到下填充并且看起来不像菜单，是否可以使用看起来像一个漂亮菜单的react-native-menu。感谢任何帮助。 – CNK2343

有可能......但使用'react-native-drawer-layout'也可以。您只需为组件抽屉菜单添加样式。你可以在我的回答中看到，我更新它.. – muhammadaa

再次感谢。但为什么我不能在右边有'菜单'？当我改变到正确时，它消失了。对于菜单，我可以使用TouchableHighlight并仍然从常量中提取文本？ – CNK2343

我使用native-base库创建菜单，这是文档。你可以尝试搜索组件，您需要

https://docs.nativebase.io/Components.html#Components

这是一个例子，我试图让一个菜单

/** * 样品反应原生应用 * https://github.com/facebook/react-native * @flow */

import React, { Component } from 'react'; 
import { AppRegistry } from 'react-native'; 
import { Container, Content, Header, Body, Right, Button, Icon, Title, Drawer, Text } from 'native-base'; 

class SideBar extends Component { 
    render(){ 
    return(
     <Content style={{ backgroundColor: '#FFF' }} > 
      <Text>Account</Text> 
      <Text>SignOut</Text> 
     </Content> 
    ) 
    } 
} 

export default class App extends Component { 
    closeDrawer =() => { 
    this.drawer._root.close() 
    } 
    openDrawer =() => { 
    this.drawer._root.open() 
    } 
    render(){ 
    return(
     <Drawer 
     ref={(ref) => { this.drawer = ref; }} 
     content={<SideBar navigator={this.navigator} />} 
     onClose={() => this.closeDrawer()} > 
      <Container> 
      <Header> 
       <Body> 
       <Title>Header</Title> 
       </Body> 
       <Right> 
       <Button transparent onPress={this.openDrawer} > 
        <Icon name='menu' /> 
       </Button> 
       </Right> 
      </Header> 
      </Container> 
     </Drawer> 
    ) 
    } 
} 

AppRegistry.registerComponent('Main',() => App);

您可以设计自己的菜单。也许它可以帮助你，谢谢:)

来源

2017-08-02 04:53:46

阵营本地操作栏和反应机菜单

回答

相关问题