陣營本地操作欄和反應機菜單

Question

我是新來的陣營本地和喜歡它至今。我正嘗試創建一個屏幕（用於跨平臺應用程序），右上角有一個菜單圖標，點擊時我想打開一個菜單，希望通過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); 

Answer 1

我嘗試用你的情況來完成，我增加對創建菜單抽屜佈局庫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

的情況下，我的模擬器展示，如：

---

我希望我的回答可以幫助你，給你換個思路來發展自己的應用。戰鬥...;））

Answer 2

我使用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); 

您可以設計自己的菜單。也許它可以幫助你，謝謝:)