在 createBottomTabNavigator react-navigation 中有条件地渲染路由答案

【问题标题】：Conditionally render routes in createBottomTabNavigator react-navigation在 createBottomTabNavigator react-navigation 中有条件地渲染路由
【发布时间】：2020-01-12 16:51:34
【问题描述】：

在我的 react-native 应用程序中，我想有条件地在导航菜单中呈现路线。我使用 react-navigations createBottomTabNavigator 作为导航菜单。

条件基于用户角色并通过 api 调用检索。

API 调用不会在初始加载时发生。

我正在使用mobx-state-tree 进行应用程序状态管理，角色存储在 MST 存储中。

我必须用observer 装饰顶级容器createAppContainer，以期在观察到的角色发生变化时重新渲染。在顶层重新渲染似乎效率低下，无论如何我都无法让它工作。

就我而言，不可能通过react-navigation 提供的 HOC 向下传递道具。而且我不能将它们包装在组件中来实现这一点，因为它们被用作 HOC 的参数。

对于一些结构上的澄清，我使用以下 HOC

createAppContainer 用于包装我的应用程序。我通过它一个
createSwitchNavigator 并传递给它一个
createBottomTabNavigator 被多次传递
createStackNavigator 通过实际屏幕。这些是需要有条件地渲染的。

//how can I at this level conditionally render 
function screenExcluder() {
    const stacks = {
        SomeStackNavigator,
        //...
    }
    console.log("MainTabNavigator, profilestore ", )

    if (UserStore.isRegularUser){
        stacks.ProfileStack = ProfileStack
        stacks.SettingsStack = SettingsStack
    }

    return stacks
}

export default createBottomTabNavigator(
    screenExcluder(), {
    tabBarComponent: Tabs,
})

我希望有一个解决方案可以使 createBottomTabNavigator 根据 mobx-state-tree 商店中更改值的值有条件地渲染路由

我正在使用 react-navigation 3.0.9 版。

【问题讨论】：

标签： reactjs react-native conditional-statements react-navigation

【解决方案1】：

这个插件目前不允许动态路由。

https://react-navigation.canny.io/feature-requests/p/dynamic-routes-for-navigators

您必须在应用启动时定义所有路由。您可以寻找替代插件，例如 react-router

更多选项请加入thread

建议

或者您可以更改规划路线安全性的方式，例如渲染所有路线并根据用户保护它们

【讨论】：