在createBottomTabNavigator react-navigation

Question

在我的本机应用程序中，我想有条件地在导航菜单中呈现路线。我在导航菜单中使用了反应导航createBottomTabNavigator。

该条件基于用户角色，可以通过api调用进行检索。

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

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

我必须用createAppContainer装饰顶层容器observer，以期在观察到的角色变化时重新渲染。在顶级重新渲染似乎效率低下，我还是无法使其正常工作。

就我而言，无法通过react-navigation提供的HOC传递道具。而且我不能将它们包装在实现此目的的组件中，因为它们被用作HOC的参数。

为澄清结构，我使用了以下HOC's

• 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有条件地呈现路由

我正在使用3.0.9版的反应导航。

Answer 1

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

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

启动应用程序时，必须定义所有路由。您可以寻找react-router

之类的替代插件

有关更多选项，请加入此thread

建议

或者您可以更改规划路由安全性的方式，例如呈现所有路由并根据用户对其进行保护

更多信息：https://reactnavigation.org/docs/en/auth-flow.html