Question

我在另一个tabNavigator内嵌套了tabNavigator，我试图隐藏内部tabNavigator的tabBar。（下面的那个显示＆＃34; Map＆＃34;和＆＃34; list＆＃34;）。我希望保留主要tabNavigator，其中包含＃34;地图收藏夹添加网站更多＆＃34;。

以这种方式呈现的代码如下：

＆＃13;

const MainNavigator = StackNavigator({
            login: {
                screen: LoginScreen
            },
            main: {
                screen: TabNavigator({
                    search: {
                        screen: TabNavigator({
                            map: {
                                screen: MapScreen
                            },
                            list: {
                                screen: ListScreen
                            }
                        })
                    },
                    favorites: {screen: FavoritesScreen},
                    addSite: {screen: AddSiteScreen},
                    more: {screen: MoreScreen}
                })
            },
            filter: {
                screen: FilterScreen,
                navigationOptions: {
                    tabBarVisible: false
                }
            }
        }, {
            lazy: true
        });

＆＃13;

我已尝试添加

navigationOptions: {
    tabBarVisible: false
}

到search项目，如下所示：

search: {
    screen: TabNavigator({
        map: {
            screen: MapScreen
        },
        list: {
            screen: ListScreen
        }
    },
    navigationOptions: {
        tabBarVisible: false
    })
}

但它最终隐藏了最外面的TabNavigator（读取＆＃34;地图收藏夹添加网站更多＆＃34;）而不是内部的那个，正如我所期望的那样。（下图）

最后，出于想法和想法可能需要尽可能地嵌套，我也试过添加

navigationOptions: {
    tabBarVisible: false
}

指向最里面的map和list项：

                search: {
                    screen: TabNavigator({
                        map: {
                            screen: MapScreen,
                            navigationOptions: {
                                tabBarVisible: false
                            }
                        },
                        list: {
                            screen: ListScreen,
                            navigationOptions: {
                                tabBarVisible: false
                            }
                        }
                    })
                }

但结果是隐藏了TabNavigator两个并且根本没有。我是否遗漏了一些关于如何实现这一目标的简单方法？

由于

Answer 1

将navigationOptions与tabBarVisible：false属性相加是正确的。但是，您希望将其作为属性添加到tabNavigator，而不是像屏幕本身一样：

search: {
screen: TabNavigator({
    map: {
        screen: MapScreen,
        navigationOptions: {
            tabBarVisible: false
        }
    },
    list: {
        screen: ListScreen
    }
}, navigationOptions: {
    tabBarVisible: false
});

}

我想指出的一件事是lazy：true在反应导航版本23中已被弃用，因此除非您使用的是版本22或更低版本，否则不会做任何事情。

Answer 2

我从来没有找到这个问题的好答案，似乎它可能是图书馆的限制。

作为一种解决方法（同样有效），我决定不使用三个不同的屏幕：SearchScreen，MapScreen和ListScreen，我只是选择了一个屏幕SearchScreen，当该屏幕呈现时，它会调用要在其内部渲染的组件。

导航部分现在更平坦，看起来像这样：

            main: {
                screen: TabNavigator({
                    search: {screen: SearchScreen},
                    favorites: {screen: FavoritesScreen},
                    addSite: {screen: AddSiteScreen},
                    more: {screen: MoreScreen}
                })
            }

然后在SearchScreen内部，我只渲染组件（而不是将它们视为各自不同的屏幕）

renderSearchScreen = () => {
        const {viewStyle, lastKnownRegion, mapLoaded, sites} = this.props;

        if (viewStyle === map.SearchOptions.MAP) {
            return (
                <SearchMap
                    lastKnownRegion={lastKnownRegion}
                    mapLoaded={mapLoaded}
                    updateRegion={this.props.updateRegion}
                    sites={sites}
                />
            );
        } else {
            return (
                <SearchList
                    sites={sites}
                />
            );
        }

    };

经过这些更改后，它运行良好，没有任何问题。我认为从架构的角度来看它也更清晰，更合乎逻辑，Map和List是嵌套和渲染的组件，而不是它们也是不同的屏幕。

希望这可以帮助其他遇到嵌套TabNavigator s类似问题的人！

无法在react-navigation中隐藏嵌套的tabNavigator的tabBar

2 个答案: