react-native - react-native 导航栏中的侧边菜单

Question

我对 Navigator 与 react-native-side-menu 的使用感到困惑。在我的代码中，我使用导航器和 NavigatorIOS 作为导航栏中的侧边菜单，但由于使用了 NavigatorIOS，该代码在 Android 中不起作用。现在我正在尝试将我的代码转换为在 react-native 中使用 Navigator。

• 这是我使用 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 side-menu 编写时工作正常但在 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 给我建议吗？非常感谢任何帮助。

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 会将其传递给通过导航器呈现的每个场景。