MaterialTopTabNavigator动态路由配置

Question

我想通过createBottomTabNavigator创建。它有5个标签。每个标签都是StackNavigator。

其中一个标签有一个顶部标签栏。我通过createMaterialTopTabNavigator创建顶部标签栏

但我知道http请求后的标签计数。如何动态添加标签？医生说

如果您绝对需要动态路由，则有一些解决方法，但您可能会遇到一些额外的复杂性

我对这个任务很困惑。

我怎样才能做到这一点？

相关的反应导航问题：https://react-navigation.canny.io/feature-requests/p/dynamic-routes-for-navigators

Answer 1

我认为你可以创建一个返回tabNavigator的组件。然后，您可以访问道具或执行任何动态添加或删除选项卡的操作。在这里，我使用的是最新版本的react-navigation。

import React, {Component} from 'react-native'
import {createMaterialTopTabNavigator, createAppContainer} from 'react-navigation'

class DynamicTabs extends Component{
    render(){
        //I am using a prop here to update the Tabs but you can use state to update 
        //when the network request has succeeded or failed
        const {shouldRenderTab} = this.props

        const TabNavigator = createMaterialTopTabNavigator({
            Tab1: Tab1Component,
            Tab2: Tab2Component,
            //Create a tab here that will display conditionally
            ...(shouldRenderTab ? {Tab3: Tab3Component} : {})
        })

        const ContainedTabNavigator = createAppContainer(TabNavigator)

        return <ContainedTabNavigator/>

    }
}

export default DynamicTabs

这是我使用改编自原始解决方案posted on github的当前解决方案