React Native中导航栏中的侧边菜单

Question

我对使用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()时，它会抛出如下图所示的错误 有人能给我建议如何解决这个问题以及如何在react-native中使用Navigator和侧边菜单吗？非常感谢您的任何帮助。

- Hussian Shaik

---

尝试将 onPress={this.showSideBar()} 更改为 onPress={this.showSideBar} 或 onPress={() => this.showSideBar()}。 - Julius Breckel

@schinknbrot，我也尝试了那样做，但仍然显示与上述相同的错误。 - Hussian Shaik

我对这种情况下的 this 作用域并不完全确定。 你能否尝试在 render 方法内将 this.showSideBar 分配给一个局部变量？ - Julius Breckel

即使它显示类似于undefined is not an object(evaluating'this.refs.sidemenu')的错误，如果可能的话，您能否使用NavigatorIOS检查上述代码，在IOS中它对我有效，但在Android中会引发错误，所以您能否将NavigatorIOS更改为navigator，并且我已经尝试过了，您能否检查并给我建议，我写错了哪里。 - Hussian Shaik

你还需要更新 showSideBar() { return this._sideMenu.openMenu();}。 - Julius Breckel

Answer 1

要么

1）通过passProps将其添加到组件中。例如：

initialRoute={{
    component: YourComponent,
    passProps: {
        onLeftButtonPress: this.showSideBa,
    },
    (..other stuff here)
}}

或者

2）将其作为属性添加到renderScene中。例如：

renderScene: function(route, navigator) {
    var Component = route.component;
    var navBar = route.navigationBar;

    return (
      <View style={styles.navigator}>
        <Component
          {...route.passProps}
          navigator={navigator}
          route={route}
          onLeftButtonPress={this.showSideBar}/>
      </View>
    );
},

并且在导航器中更新您的renderScene()，使其指向该函数。

initialRoute={{
    component: YourComponent,
    (..other stuff here),
    renderScene={this.renderScene}
}}

使用方法2将把它传递给通过导航器渲染的每个场景。

- Moss Palmer