无法在反应导航中隐藏嵌套的 tabNavigator 的 tabBar

Question

我在另一个 tabNavigator 中有一个嵌套的 tabNavigator，我正在尝试隐藏内部 tabNavigator 的 tabBar。（下面显示 "Map" 和 "list" 的那个）。我想保留 tabNavigator 的主要部分 "Map Favorites Add a Site More".

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

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

我试过添加

navigationOptions: {
    tabBarVisible: false
}

到search项如下图：

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

但它最终隐藏了最外层的 TabNavigator（显示为 "Map Favorites Add a Site More" 的那个）而不是我所期望的最内层的。（下图）

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

navigationOptions: {
    tabBarVisible: false
}

到最里面的 map 和 list 项：

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

但这样做的结果是隐藏了两个 TabNavigator 并且根本没有 none。我是否遗漏了一些简单的实现方法？

谢谢

Answer 1

您添加带有属性 tabBarVisible: false 的导航选项是正确的。但是，您想将其作为属性添加到 tabNavigator，而不是像这样添加到屏幕本身：

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

}

我想指出的一件事是 lazy: true 在 react-navigation 版本 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 是嵌套和呈现的组件，而不是它们也是不同的屏幕，这也更清晰、更合乎逻辑。

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

无法在反应导航中隐藏嵌套的 tabNavigator 的 tabBar

Unable to hide nested tabNavigator's tabBar in react-navigation

react-navigation