[英]React native action bar and react native menu
I am new to React-Native and love it so far. 我是React-Native的新手并且喜欢它。 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.
我正在尝试使用右上角的菜单图标创建一个屏幕(针对跨平台应用),点击后,我想打开一个菜单,希望使用react-native-menu显示“注销”和“帐户”菜单选项。 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 . 我尝试完成你的情况,我添加库
react-native-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. 第1步 - 创建菜单列表(我创建了一个单独的,以便在我想添加另一个菜单时更容易),它只是内容ArrayList。 I called that file
Constants
, and you can write in Constants.js
like : 我将该文件称为
Constants
,您可以在Constants.js
编写如下:
export const MENU_LIST = [ { index: 1, name: 'Action' }, { index: 2, name: 'Sign Out' }, ]
Step 2 - I create Menu component for showing menu list. 第2步 - 我创建菜单组件以显示菜单列表。 In
Menu.js
you write like : 在
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> ); } }
Step 3 - Refactor main component like : 第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);
In my emulator, that will display like: 在我的模拟器中,它将显示如下:
and when i klik menu icon, that will display like: 当我点击菜单图标时,它将显示如下:
UPDATE-1 : 更新-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: 如果你想让组件抽屉菜单没有填充到底部,你可以在组件
<Menu />
使用样式,我给包装器的边距如下:
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 : 并在
<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> ); } }
Full code in Menu.js
like : 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, } });
And the result like : 结果如下:
UPDATE-2 : 更新-2 :
based on your case in the comments, if you want to change position menu
to the right. 根据您在评论中的情况,如果您想将位置
menu
更改为右侧。 You must change position the drawer first. 您必须先改变抽屉的位置。
Actually : 实际上:
main
file like : 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> ); }
if you want to learn about DrawerLayout on Android you can read the documentation. 如果你想了解Android上的DrawerLayout,你可以阅读文档。
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... ;))
战斗......;))
i use native-base
library to create menu, this is the documentation. 我使用
native-base
库创建菜单,这是文档。 you can try to search component you needed 您可以尝试搜索所需的组件
https://docs.nativebase.io/Components.html#Components https://docs.nativebase.io/Components.html#Components
this is one example i tried to make a menu 这是我尝试制作菜单的一个例子
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ / ** *样本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);
you can style your own menu. 你可以自己设置菜单。 maybe it can help you, thanks :)
也许它可以帮助你,谢谢:)
react-native-modal-dropdown implement these things 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)}
+ />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.