Question

我对使用react-native-side-menu的Navigator感到困惑。在我的代码中，我使用导航器和导航栏中的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侧面菜单编写正常但在react-native-side-menu中使用导航器时它无法正常工作，这是使用导航器

的代码

 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将其添加到组件中。 e.g。

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

或

2）将其作为属性添加到renderScene。 e.g。

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

反应原生的导航栏中的侧面菜单

1 个答案: