React native 反应本机导航器：根据route.id显示/隐藏导航栏

我正在使用“导航器”组件管理react本机应用程序中的不同场景

我创建了一个带有导航栏的组件，然后将其包含在我的index.android.js中，如下所示：

var Navigation = require('./Navigation');

我希望能够根据route.id显示/隐藏导航栏

我尝试在导航组件中添加

navigationBar={this.renderNavbar()}

我加了一句

renderNavbar(route,navigator){

    _navigator = navigator;
        if(route.id !== ‘Home’){
            return (
                <Navigator.NavigationBar 
                style={{backgroundColor: '#f5f6f8'}}
                routeMapper={NavigationBarRouteMapper} />
            );
        }
    }
}

renderNavbar（路线、导航器）{
_导航器=导航器；
如果（route.id！=“Home”）{
返回(
);
}
}
}

但它不起作用，我不知道在哪里以及如何访问route.id

---

有什么想法吗？

您可以使用状态并实现类似的功能

  renderScene(route,navigator){
    if(route.id !== 'Home'){
       this.setState({
         showNavBar: true
       });
    }else {
       this.setState({
          showNavBar: false
       });
    }
  }
  render() {
    let navigationBar = null;
    if(this.state.showNavBar === true){
        navigationBar =  (<Navigator.NavigationBar 
            style={{backgroundColor: '#f5f6f8'}}
            routeMapper={NavigationBarRouteMapper} />);
    }
    return (
        <Navigator ref="navigator" 
         initialRoute={{id: 'Home'}}renderScene={this.renderScene.bind(this)} navigationBar={navigationBar}/>
    );
  }

renderScene（路线、导航器）{
如果（route.id！=“Home”）{
这是我的国家({
showNavBar：对
});
}否则{
这是我的国家({
showNavBar:错误
});
}
}
render（）{
让navigationBar=null；
if（this.state.showNavBar==true）{
导航条=（）；
}
返回(
);
}

我就是这样解决的：

var Navigation = require('./Navigation');

在类导航所在的同一文件中添加了新的类导航栏：

class NavigationBar extends Navigator.NavigationBar {
    render() {
        var routes = this.props.navState.routeStack;
        if(routes.length){
            var route = routes[routes.length -1];
        }
        if (!route.display) {
            return null;
        }
        return super.render();
    }
}

在导航类中添加：

navigatorRenderScene(route, navigator) {
        _navigator = navigator;
        route.display = true;
        switch (route.id) {
            case 'Home':
                route.display = false;
                return (<Home navigator={navigator}  {...route.passProps}  title="Home" />);
            case 'LoginOne':
                return (<LoginOne navigator={navigator}  {...route.passProps} title="Add phone number" />);
            case 'LoginTwo':
                return (<LoginTwo navigator={navigator}  {...route.passProps} title="Verify phone number" />);
            case 'LoginThree':
                return (<LoginThree navigator={navigator}  {...route.passProps} title="Sign Up" />);
            case 'Signin':
                return (<Signin navigator={navigator}  {...route.passProps} title="Register" />);
            case 'SearchForm':
                return (<SearchForm navigator={navigator}  {...route.passProps} title="SearchForm" />);
            case 'Reservations':
                return (<Reservations navigator={navigator}  {...route.passProps} title="Réservations" />);
            case 'Account':
                return (<Account navigator={navigator}  {...route.passProps} title="Account" />);
            case 'Results':
                return (<Results navigator={navigator}  {...route.passProps} title="Results" />);
            case 'Test':
                return (<Test navigator={navigator}  {...route.passProps} title="Test" />);
        }
    }

navigatorRenderScene（路线、导航器）{
_导航器=导航器；
route.display=true；
交换机（route.id）{
“家”案例：
route.display=false；
返回（）；
案例“LoginOne”：
返回（）；
案例“LoginTwo”：
返回（）；
案例“登录树”：
返回（）；
案例“签名”：
返回（）；
案例“搜索表单”：
返回（）；
“保留”一案：
返回（）；
“账户”案例：
返回（）；
案例“结果”：
返回（）；
案例“测试”：
返回（）；
}
}