React native 在React Native中隐藏导航器？

我正在用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}
                    />
                }
            />
        );
    }
}

类testApp扩展组件{
renderScene（路线、导航器）{
交换机（路由名称）{
“家”案例：
返回（）
案例“登录”：
返回（）
}
}
render（）{
返回(
Navigator.sceneconfig.FloatFromBottomAndroid}
导航栏={
}
/>
);
}
}

---

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

由于导航栏的概念是在过渡期间保持不变，我认为您无法从导航器的路由中访问它。一种解决方案是堆叠两个导航器。一个外部导航器，用于在登录和主应用程序之间进行路由。这个没有导航栏。主应用程序本身就是一个具有导航栏的导航器。不要忘记在适当的名称属性“navigator”中为内部导航器提供外部导航器的实例

---

全面披露：我从未尝试过，但它应该是这样工作的。

由于导航栏的概念是在过渡期间保持不变，我认为您无法从导航器的路由中访问它。一种解决方案是堆叠两个导航器。一个外部导航器，用于在登录和主应用程序之间进行路由。这个没有导航栏。主应用程序本身就是一个具有导航栏的导航器。不要忘记在适当的名称属性“navigator”中为内部导航器提供外部导航器的实例

---

完整披露：我从未尝试过这个，但它应该是这样工作的。

因此我通过使用以下类将导航器移动到它自己的组件来解决它：

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

    }
}

在“我的索引”中，我将“显示”设置为“真”，但“登录”设置为“假”的情况除外：

    route.display = true;

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

route.display=true；
交换机（路由名称）{
“家”案例：
返回（）
案例“登录”：
route.display=false；
返回（）
}

---

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

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

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

    }
}

在“我的索引”中，我将“显示”设置为“真”，但“登录”设置为“假”的情况除外：

    route.display = true;

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

route.display=true；
交换机（路由名称）{
“家”案例：
返回（）
案例“登录”：
route.display=false；
返回（）
}

---

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

谢谢你的回复。实际上，我通过在路由中添加一个变量来解决这个问题，在登录时将其设置为false，否则设置为true。有了这个，我可以返回null，而不是登录页面的导航器。酷。也许你应该写这篇文章来回答你自己的问题。其他人可能会发现它很有用，而不是阅读所有的评论谢谢你的回复。实际上，我通过在路由中添加一个变量来解决这个问题，在登录时将其设置为false，否则设置为true。有了这个，我可以返回null，而不是登录页面的导航器。酷。也许你应该写这篇文章来回答你自己的问题。其他人可能会发现它很有用，而不是阅读所有的评论