Question

我是React-Native的新手并且喜欢它。我正在尝试创建一个屏幕（针对跨平台应用），右上角有一个菜单图标，点击后，我想打开一个菜单，希望用react-native-menu显示＆＃39;退出＆＃39 ;和＆＃39;帐户＆＃39;菜单选项。在此之后很难弄清楚如何调用菜单。感谢任何帮助。

 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中写下：

＆＃13;

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

＆＃13;

第2步 - 我创建了用于显示菜单列表的Menu组件。在Menu.js中你写得像：

＆＃13;

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

＆＃13;

第3步 - 重构主要组件，如：

＆＃13;

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

＆＃13;

在我的模拟器中，它将显示如下：

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

UPDATE-1 ：

如果你想让组件抽屉菜单不填充到底部，你可以在组件<Menu />中使用样式，我给包装器提供边距，如：

＆＃13;

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

＆＃13;

在<Menu />中为组件添加样式，如：

＆＃13;

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

＆＃13;

Menu.js中的完整代码，如：

＆＃13;

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

＆＃13;

结果如：

UPDATE-2 ：

根据您在评论中的情况，如果您想将位置menu更改为右侧。你必须先改变抽屉的位置。

实际上：

我将抽屉设置在屏幕的一半，并在左侧设置位置。您可以在main文件中看到：

＆＃13;

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

＆＃13;

Hopelly：

我在右侧设置了菜单选项。您只需更改位置抽屉，如：

＆＃13;

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

＆＃13;

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

API DrawerLayoutAndroid

对于这种情况，我的模拟器显示如下：

我希望我的回答可以帮助您，让您的另一个想法来开发您的应用程序。战斗......;））

Answer 2

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

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

这是我尝试制作菜单的一个例子

/ ** *示例React Native App * https://github.com/facebook/react-native * @流 * /

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实现这些事情

this.someWork.duration = `${this.addForm.value.hours}:${this.addForm.value.minutes}`;

反应原生动作栏并反应原生菜单

3 个答案: