Question

我正在使用React Native开发我的第一个应用程序，并遇到了我的第一个问题。对于导航我使用导航器。问题是我想将其隐藏在应用程序的登录页面上，但不知道该怎么做。

这是index.ios.js的导航器：

class testApp extends Component {
    renderScene(route, navigator) {

        switch (route.name) {
            case 'home':
                return (<Home navigator={navigator} />)
            case 'login':
                return (<Login navigator={navigator} />)
        }
    }
    render() {
        return (
            <Navigator
                initialRoute={{name: 'login'}}
                renderScene={this.renderScene}
                configureScene={() => Navigator.SceneConfigs.FloatFromBottomAndroid}

                navigationBar={
                    <Navigator.NavigationBar
                        routeMapper={NavigationBarRouteMapper}
                        style = {styles.navigationBar}
                    />
                }
            />
        );
    }
}

有没有办法隐藏某个页面的导航器？

Answer 1

所以我设法通过使用以下类将导航器移动到自己的组件来自行解决：

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

    }
}

在我的索引中，我将display设置为true，但登录设置为false除外：

    route.display = true;

    switch (route.name) {
        case 'home':
            return (<Home navigator={navigator} />)
        case 'login':
            route.display = false;
            return (<Login navigator={navigator} />)
    }

可能不是最好的解决方案，因为每次渲染视图时变量都设置为true或false。但它确实有效。

Answer 2

由于导航栏的概念是在转换过程中持续存在，因此我认为您无法从导航器的路由中访问它。一种解决方案是堆叠两个导航器。一个外部导航器，用于在登录和主应用之间进行路由。这个没有导航栏。主应用程序本身就是一个带导航栏的导航器。不要忘记在aptly name属性“navigator”中为内部导航器提供外部导航器的实例。

完全披露：我从未真正尝试过，但它应该像这样工作。

在React Native中隐藏导航器？

2 个答案: