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

Question

我在另一个tabNavigator里面有一个嵌套的tabNavigator，而我正试图让内部的tabNavigator的tabBar被隐藏起来。 （下面的一个显示“地图”和“列表”）。我想保留主要的tabNavigator，上面写着“地图收藏夹添加网站更多”。

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

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（读取“地图收藏夹添加网站更多”），而不是我期望的内部。 （下图）

navigationOptions: {
    tabBarVisible: false
}

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

map

到最里面的list和

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

项目：

TabNavigator

但结果是隐藏了两个

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

s并且根本没有。我是否遗漏了如何实现这一目标的简单方法？

谢谢

Answer 1

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

SearchScreen

}

我想指出的一件事是懒惰：在反应导航版本23中不推荐使用true，因此除非您使用的是版本22或更低版本，否则将无法执行任何操作。

Answer 2

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

作为一种解决方法（同样有效），我决定不使用三个不同的屏幕：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是嵌套和渲染的组件，而不是它们也是不同的屏幕。

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