Question

我正在使用＆＃39; Navigator＆＃39;用于管理我的react-native应用程序中的不同场景的组件。

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

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

我希望能够显示/隐藏navigationBar，具体取决于route.id

我在导航组件中尝试添加

navigationBar={this.renderNavbar()}

在外面渲染我添加了

renderNavbar(route,navigator){

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

但它不起作用，我不明白究竟在哪里以及如何访问route.id

任何想法？

Answer 1

我只是设法解决了这个问题：

在类导航为的同一文件中添加了一个新类NavigationBar：

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();
    }
}

在Navigation类中添加：

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" />);
        }
    }

Answer 2

你可以使用状态并实现类似的东西

  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}/>
    );
  }

React native Navigator：根据route.id显示/隐藏navigationBar

2 个答案: