反应本机操作栏和反应本机菜单 [英] React native action bar and react native menu

查看：62 发布时间：2021/7/4 18:45:17 react-native

本文介绍了反应本机操作栏和反应本机菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 React-Native 的新手，到目前为止我很喜欢它.我正在尝试创建一个屏幕(用于跨平台应用程序)，右上角有一个菜单图标，单击时，我想打开一个菜单，希望使用 react-native-menu 来显示退出"和帐户"菜单选项.在此之后很难弄清楚如何调用菜单.感谢任何帮助.

 import React, { Component } from 'react';进口 {应用注册，样式表，看法，来自'反应原生';从'react-native-action-bar'导入ActionBar；导出测试类 Main 扩展组件 {使成为() {返回 (<视图样式={styles.screen}><操作栏containerStyle={styles.bar}backgroundColor='#33cc33'rightIcons={[{name: '菜单',onPress: () =>console.log('点击菜单'),},]}/></查看>);}}const 样式 = StyleSheet.create({屏幕: {背景颜色:'#33cc33'，弹性:1，填充顶部:10，alignItems: '中心',//填充:10},});AppRegistry.registerComponent('Main', () => Main);

解决方案

我尝试完成您的案例，我添加了库 react-native-drawer-layout 用于创建菜单抽屉布局.您可以在

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

UPDATE-1 :

如果你想让组件抽屉菜单不填满底部，你可以在组件<Menu/>中播放样式，我给包装器留了余量，如:

const 样式 = StyleSheet.create({包装器:{背景颜色:'#33cc33'，边距顶部:50，},列表菜单:{白颜色'，字体大小:16，填充左:20，填充顶部:12，填充底部:12，}});

并在

中为组件添加样式，例如:

导出默认类 Menu extends Component {使成为() {返回 (<视图样式={styles.wrapper}>//添加样式包装器<滚动视图>{menuList.MENU_LIST.map(item => (<TouchableOpacity键={item.index}onPress={() =>console.log('进入菜单')}><Text style={styles.listMenu}>{item.name}</Text>//添加样式菜单</TouchableOpacity>))}</滚动视图></查看>);}}

Menu.js 中的完整代码如:

import React, { Component, PropTypes } from 'react';import { View, ScrollView, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';从'react-native-vector-icons/MaterialIcons'导入图标；const menuList = require('./Constants.js');导出默认类菜单扩展组件{使成为() {返回 (<视图样式={styles.wrapper}><滚动视图>{menuList.MENU_LIST.map(item => (<TouchableOpacity键={item.index}onPress={() =>console.log('进入菜单')}><Text style={styles.listMenu}>{item.name}</Text></TouchableOpacity>))}</滚动视图></查看>);}}const 样式 = StyleSheet.create({包装器:{背景颜色:'#33cc33'，边距顶部:50，},列表菜单:{白颜色'，字体大小:16，填充左:20，填充顶部:12，填充底部:12，}});

结果如下:

<小时>

UPDATE-2 :

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

实际上:

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

 render() {返回 (<抽屉布局/* 这是设置宽度抽屉 */抽屉宽度={300}/* 结尾 */ref={抽屉元素=>{this.DRAWER = 抽屉元素；}}/* 这是设置位置抽屉 */drawerPosition={DrawerLayout.positions.left}/* 结尾 */onDrawerOpen={this.setDrawerState}onDrawerClose={this.setDrawerState}renderNavigationView={() =><菜单/>}><操作栏containerStyle={styles.bar}backgroundColor="#33cc33"leftIconName={'菜单'}onLeftPress={this.toggleDrawer}/></抽屉布局>);}

希望:

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

 render() {返回 (<抽屉布局抽屉宽度={300}ref={抽屉元素=>{this.DRAWER = 抽屉元素；}}//我改变了右边的位置.drawerPosition={DrawerLayout.positions.Right}onDrawerOpen={this.setDrawerState}onDrawerClose={this.setDrawerState}renderNavigationView={() =><菜单/>}><操作栏containerStyle={styles.bar}backgroundColor="#33cc33"rightIcons={[{name: '菜单',onPress: this.toggleDrawer,},]}/></抽屉布局>);}

如果您想了解 Android 上的 DrawerLayout，您可以阅读文档.

<小时>

我希望我的回答可以帮助您并为您提供另一个开发应用程序的想法.战斗... ;))

I am new to React-Native and love it so far. I am trying to create a screen (for the cross-platform app) with a menu icon on top right and when clicked, I want to open a menu, hopefully with react-native-menu to display 'Sign Out' and 'Account' menu options. Having a hard time figuring out how to invoke the menu after this. Appreciate any help.

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

解决方案

I try to complete with your case, i add library react-native-drawer-layout for create menu drawer layout . You can find in this for installation.

Step 1 - Create menu list (I created a separate to make it easier when I want to add another menu), It's content only ArrayList. I called that file Constants, and you can write in Constants.js like :

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

Step 2 - I create Menu component for showing menu list. In Menu.js you write like :

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

Step 3 - Refactor main component like :

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

In my emulator, that will display like:

and when i klik menu icon, that will display like:

UPDATE-1 :

if you want to make component drawer menu not fills up to bottom, you can play on style in component <Menu />, i give margin for wrapper like:

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

  },

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

});

And add style to component in <Menu /> like :

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

Full code in Menu.js like :

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

});

And the result like :

UPDATE-2 :

based on your case in the comments, if you want to change position menu to the right. You must change position the drawer first.

Actually :

i set drawer half the screen and postion in the left. You can see in main file like :

 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 :

i set the menu options on the right. You just change position drawer like :

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

if you want to learn about DrawerLayout on Android you can read the documentation.

API DrawerLayoutAndroid

for the case, my emulator showing like :

I hope my answer can to help you and give your another idea to develop your apps. fighting... ;))

这篇关于反应本机操作栏和反应本机菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

反应本机操作栏和反应本机菜单 [英] React native action bar and react native menu

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

反应本机操作栏和反应本机菜单 [英] React native action bar and react native menu

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭