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

Question

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

在这里，固定卖方只想出售纸张，钢笔和书籍。因此，我通过标签导航器为此制作了3个标签（您可以在后面看到简单的代码）

但这已硬编码到应用程序中。我想使其成为可重用和动态的通用类，以便可以从后端为stationer1获得一个数组，例如

tabs = [Papers, Pens, Books] 

和stationer2之类的

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

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

Answer 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;

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