菜单按钮单击事件以打开SideMenu在React Native中不起作用。我尝试使用下面的代码打开SideMenu,但无法正常工作,请检查我的代码。
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Icon, Button, Container, Header, Content, Left, Title, Body, Right} from 'native-base';
export default class Training extends Component {
static navigationOptions = {
drawerIcon:(
<Icon name="grid" style={{fontSize: 24, color: 'white'}}/>
)
}
render() {
return (
<Container>
<Header style={{backgroundColor:'rgb(0,0,0)'}}>
<Left>
<Button transparent>
<Icon name='menu'
onPress={() => this.props.navigation.navigate('DrawerOpen')}
/>
</Button>
</Left>
<Body>
<Title>Training</Title>
</Body>
<Right />
</Header>
<Content contentContainerStyle={{
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}}>
<Text>Training</Text>
</Content>
</Container>
);
}
}
LeftMenu
import React, {Component} from 'react';
import {StyleSheet, Text, View, StatusBar, Image} from 'react-native';
import {DrawerNavigator, DrawerItems} from 'react-navigation';
import Registration from './src/pages/Registration';
import { Container, Header, Body, Content, Icon } from 'native-base';
import Training from './src/pages/Training';
export default class LeftMenu extends Component {
render() {
return (
<NavMenu/>
);
}
}
const CustomDrawerContentComponent = (props) => (
<Container>
<Content style={{backgroundColor:'#000000'}}>
<DrawerItems {...props} labelStyle={{color: '#ffffff'}} />
</Content>
</Container>
)
const NavMenu = DrawerNavigator({
Training:{screen: Training},
Registration:{screen: Registration}
},
{
initialRouteName:'Training',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
},
)
const styles = StyleSheet.create({
container:{
backgroundColor: '#000000',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
drawerImage:{
height:65,
width:65,
alignSelf: 'center',
},
});
菜单图标按钮单击事件以打开SideMenu在React Native中不起作用。我尝试了上面的代码打开SideMenu,但是它不起作用,请检查我的代码。