如何在反应导航选项卡导航器中动态制作选项卡答案

【问题标题】：How to dynamically make tabs in a react-navigation Tab Navigator如何在反应导航选项卡导航器中动态制作选项卡
【发布时间】：2019-09-04 16:58:43
【问题描述】：

基本上，我正在开发一个应该是 SaaS 的应用程序。不同的客户应该能够根据他们的需要使用该应用程序。假设 10 家文具店是我的客户，他们每家都有一些不同的商品要出售。例如：

这里的文具卖家只想卖纸、笔和书。所以我通过标签导航器为此做了3个标签（你可以在后面看到简单的代码）

但这是硬编码到应用程序中的。我想把它变成可重用和动态的通用东西，这样我就可以从我的后端为 stationer1 获取一个数组，比如

tabs = [Papers, Pens, Books]

对于stationer2之类的

tabs = [Papers, Bags, Pens, Pencils, Paints]

然后 createMaterialTopTabNavigator 使用此数组来创建所需的选项卡。我对如何实现这样的事情感到困惑

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

对于所有面临类似问题的人，感谢link 的帮助，我想通了

我在此代码解决方案中使用了一个固定数组，但显然您可以调用您的 api 服务器并从中获取一个项目数组，然后将其传递。

    let categories=['Papers', 'Bags', 'Pens', 'Pencils', 'Paints']
    categories = categories.reduce((val, tab) => {
        val[tab] = {
            screen: Appetizers
        }
        return val
        }, {})


    const Tabs = createMaterialTopTabNavigator(
        {
        ...categories   
        },

        {   
            swipeEnabled: true,
            tabBarOptions: {
                    style: {
                    backgroundColor: '#FECE17'
                    },
                    activeTintColor: 'black'  ,
                    inactiveTintColor: 'grey',
                    scrollEnabled: true





            }
        }
    );

    const tabNav = createAppContainer(Tabs);
    export default tabNav;

对我来说就像一个魅力！祝你好运

【讨论】：