我对使用Navigator
与react-native-side-menu感到困惑。在我的代码中,我在导航栏中使用了navigator和NavigatorIOS
来实现侧边菜单,但由于使用了NavigatorIOS
,所以该代码在Android上无法正常工作。现在我正在尝试将我的代码转换为使用Navigator
在react-native中实现。
- 以下是我使用
NavigatorIOS
的代码:
var Basic = React.createClass({
getInitialState() {
return {
navigationBarHidden: false
};
},
showSideBar () {
return this.refs.sidemenu.openMenu();
},
getNavigator(){
if (this.refs.nav){
return this.refs.nav.navigator;
}else{
return undefined;
}
},
LogOut(){
this.refs.sidemenu.closeMenu();
this.props.navigator.popToTop();
},
render(){
//alert("renderEmail:"+this.props.email);
return (
<SideMenu
ref="sidemenu"
touchToClose={true}
disableGestures={true}
menu={
<Menu
getNavigator={this.getNavigator}
showSideBar={this.showSideBar}
LogOut={this.LogOut}
/>
}
>
<NavigatorIOS
ref = "nav"
shouldUpdate={true}
style={styles.container}
barTintColor='#1A8A29'
tintColor='white'
titleTextColor='white'
initialRoute={{
component: BecomeMember,
title:'Become Member',
leftButtonIcon: require('image!menu1'),
onLeftButtonPress: ()=> {this.showSideBar(); },
rightButtonTitle: 'Log Out',
onRightButtonPress: ()=> {this.LogOut();},
passProps: {email:this.props.email,userId:this.props.userId},
}}
/>
</SideMenu>
);
}
});
当我使用NavigatorIOS
编写时,侧边菜单可以正常工作,但是在使用react-native-side-menu
中的Navigator
时无法正常工作。以下是使用Navigator
的代码。 showSideBar () {
return this.refs.sidemenu.openMenu();
},
getNavigator(){
if (this.refs.nav){
return this.refs.nav.navigator;
}else{
return undefined;
}
},
LogOut(){
this.refs.sidemenu.closeMenu();
this.props.navigator.popToTop();
},
render(){
//alert("renderEmail:"+this.props.email);
var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState){
if(index > 0){
return(
<TouchableHighlight style={{marginTop: 10}} onPress={() =>{
if(index > 0){
navigator.pop();
}
}}>
<Text>Back</Text>
</TouchableHighlight>
)
}else{
return (
<Text onPress={this.showSideBar()}>Main</Text>
)
}
},
RightButton(route, navigator, index, navState){
return null;
},
Title(route, navigator, index, navState){
return <Text style={styles.navBarTitle}>MaxWords</Text>
}
}
return (
<SideMenu ref="sidemenu" touchToClose={true} disableGestures={true} menu={<Menu getNavigator={this.getNavigator} showSideBar={this.showSideBar} LogOut={this.LogOut}/>}>
<Navigator
ref="nav"
shouldUpdate={true}
style={{flex:1}}
initialRoute={{name:'My Profile',component:MyProfile,leftButtonIcon: require('image!menu1'),
onLeftButtonPress: ()=> {this.showSideBar()},index:0}}
renderScene={(route, navigator) => {
if(route.component){
return React.createElement(route.component, {...this.props, ...route.passProps, navigator, route});
}
}}
navigationBar = {<Navigator.NavigationBar routeMapper={NavigationBarRouteMapper} style={styles.navBar}/>}/>
</SideMenu>
);
}
当我调用函数
this.showSideBar()
时,它会抛出如下图所示的错误
![enter image description here](https://istack.dev59.com/GLimF.webp)
Navigator
和侧边菜单吗?非常感谢您的任何帮助。
onPress={this.showSideBar()}
更改为onPress={this.showSideBar}
或onPress={() => this.showSideBar()}
。 - Julius Breckelthis
作用域并不完全确定。 你能否尝试在render
方法内将this.showSideBar
分配给一个局部变量? - Julius BreckelshowSideBar() { return this._sideMenu.openMenu();}
。 - Julius Breckel