Боковое меню в навигационной панели в ответном нативном

Question

Я смущен в использовании Navigator с помощью интерфейса-на-стороне. В моем коде я использую навигатор и NavigatorIOS для бокового меню в navbar, но этот код не работает в Android, из-за использования NavigatorIOS. Теперь я пытаюсь преобразовать свой код в использование Navigator в native-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 бокового меню работает корректно, но с помощью навигатора в реакции-native- боковое меню это не работает, вот код, используя Навигатор

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(), он выдает сообщение об ошибке, как показано на изображении ниже

Может ли один дать мне предложения о том, как решить эту проблему и как использовать 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 передаст его всем сценам, которые будут визуализироваться через навигатор.