反應原生動作欄並反應原生菜單

Question

我是React-Native的新手並且喜歡它。 我正在嘗試使用右上角的菜單圖標創建一個屏幕（針對跨平台應用），點擊后，我想打開一個菜單，希望使用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用於創建菜單抽屜布局。 你可以在這里找到安裝。

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

在我的模擬器中，它將顯示如下：

當我點擊菜單圖標時，它將顯示如下：

更新-1 ：

如果你想讓組件抽屜菜單沒有填充到底部，你可以在組件<Menu />使用樣式，我給包裝器的邊距如下：

 const styles = StyleSheet.create({ wrapper: { backgroundColor: '#33cc33', marginTop: 50, }, listMenu: { color: 'white', fontSize: 16, paddingLeft: 20, paddingTop: 12, paddingBottom: 12, } }); 

並在<Menu />為組件添加樣式，如：

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

Menu.js完整代碼如：

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

結果如下：

---

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

希望：

• 我在右側設置菜單選項。 你只需更改位置抽屜：

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

如果你想了解Android上的DrawerLayout，你可以閱讀文檔。

• API DrawerLayoutAndroid

對於這種情況，我的模擬器顯示如下：

---

我希望我的回答可以幫助您，讓您的另一個想法來開發您的應用程序。 戰斗......;））

Answer 2

我使用native-base庫創建菜單，這是文檔。 您可以嘗試搜索所需的組件

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

這是我嘗試制作菜單的一個例子

/ ** *樣本React Native App * 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);

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

Answer 3

react-native-modal-dropdown實現了這些功能

+import ModalDropdown from 'react-native-modal-dropdown';
class FooBar extends PureComponent {
     constructor(props) {
         super(props);
+        this.dropdownOptions = [{
+            text: 'Scan',
+            icon: require('../images/scan.png'),
+            onPress: this.toScan,
+        }, {
+            text: 'Share',
+            icon: require('../images/share.png'),
+            onPress: this.toShare,
+        }];


+    adjustDropdownStyle = style => {
+        return {
+            width: 110,
+            height: 96, // calculated from margin and height of renderDropdownItem bellow
+            right: 0,
+            top: style.top,
+        };
+    }
+
+    renderDropdownItem = (item, index, highlighted) => {
+        return (
+            <View style={{alignItems: 'center', flexDirection: 'row'}}>
+                <Image source={item.icon} style={{margin: 10, width: 28, height: 28 }}/>
+                <Text style={{fontSize: 15}}>
+                    {item.text}
+                </Text>
+            </View>
+        );
+    }
+
+    onDropdownSelect = (index, item) => item.onPress()
+
     render() {
        let navs = {
            Center: {
                text: 'Home',
            },
            Right: {
                image: require('../images/more.png'),
+                onPress: () => this.dropdown && this.dropdown.show(),
            },
        };

                  <Header navs={navs}/>
+                <ModalDropdown
+                    ref={view => {this.dropdown = view;}}
+                    style={{height: 0}}
+                    adjustFrame={this.adjustDropdownStyle}
+                    options={this.dropdownOptions}
+                    renderRow={this.renderDropdownItem.bind(this)}
+                    onSelect={this.onDropdownSelect.bind(this)}
+                />