Arrays 不变冲突：组件“Home”的视图配置getter回调必须是函数（接收到的“未定义”）

我想使用tab.screen组件上数组中的键名调用函数。 我的代码如下：

import React from 'react';
import { Text, View, TouchableOpacity, Modal } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import Icon from 'react-native-vector-icons/FontAwesome5';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../mainscreen/GeneralScreen';
import Core from '../mainscreen/CoreScreen';
import Docs from '../mainscreen/GeneralScreen';
import ESS from '../mainscreen/GeneralScreen';
import General from '../mainscreen/GeneralScreen';
import HR from '../mainscreen/GeneralScreen';
import Payroll from '../mainscreen/GeneralScreen';
import Server from '../mainscreen/CoreScreen';


const Tab = createBottomTabNavigator();
const tabcomponents = {
  "Home" : Home,
  "Core" : Core,
  "Docs" : Docs,
  "ESS" : ESS,
  "General" : General,
  "HR" : HR,
  "Payroll" : Payroll,
  "Server" : Server
};

class TabNavigator extends React.Component {

  constructor() {
      super();    
      this.state = {
         dashboardtab:[],                 
      }
      this.tabnavigatorasync();      
    }

  tabnavigatorasync = async () => {
    try {
      const dashboardtab = await AsyncStorage.getItem('dashboardtab');    
      const dashboardtabParse = JSON.parse(dashboardtab);      
      this.setState({dashboardtab: dashboardtabParse});
      //console.log('isi dari tab navigator: ', this.state.dashboardtab);                              
      //console.log('------------------------------------------------'); 
      //console.log('isi dari tab navigator 2: ', this.state.dashboardtab2[0].label);                             
    } catch (error) {      
    }
  }

  render(){
    //console.log('dashboardtab', this.state.dashboardtab);
    const tabnavigatorRender = this.state.dashboardtab.map((item, index) =>
      const tabcomponentsrender = tabcomponents[item.admintab.label];    
      return <Tab.Screen name={item.admintab.label} component={tabcomponentsrender} key={index}/>                         
    );

    return(
          <Tab.Navigator>
            {tabnavigatorRender}            
          </Tab.Navigator>
        )
  }
}

export default TabNavigator;

---

我编写的代码有问题吗？

在您的情况下，您希望使用

动态组件名称


首先，导入您的选项卡


然后将它们传递到对象中，并根据它们的名称给它们一个键


在地图内部，从该对象创建一个组件

const tabnavigator=this.state.dashboardtab.map（（项目，索引）=>{
const TabComponent=组件[item.admintab.label]；
返回
});
在您的情况下，您希望使用
动态组件名称


首先，导入您的选项卡


然后将它们传递到对象中，并根据它们的名称给它们一个键


在地图内部，从该对象创建一个组件

const tabnavigator=this.state.dashboardtab.map（（项目，索引）=>{
const TabComponent=组件[item.admintab.label]；
返回
});
您不能传递字符串而不是组件。您不能传递字符串而不是组件。我已将代码更新为这样，但出现了新的错误。@satt您能告诉我吗？我已将代码更新为这样，但出现了新的错误。指针上出现意外标记时出错：const TabComponent=components[item.admintab.label]；我想给你看我所有的代码，但是这个框的答案是有限字符。.我错过了
选项卡.屏幕
之前的
返回
。我已经更新了我的答案。我已经将代码更新为这样，但出现了新的错误。@satt您能告诉我吗？我已经将代码更新为这样，但出现了新的错误。指针上出现意外标记时出错：const TabComponent=components[item.admintab.label]；我想给你看我所有的代码，但是这个框的答案是有限字符。.我错过了
选项卡.屏幕
之前的
返回
。我已经更新了我的答案。
[
    {
        "tab_id": "home",
        "order": 10,
        "admintab": {
            "label": "Home",                        
        }
    },
    {
        "tab_id": "core",
        "order": 1,
        "admintab": {
            "label": "Core",                        
        }
    },
    {
        "tab_id": "docs",
        "order": 2,
        "admintab": {
            "label": "Docs",                        
        }
    },
    {
        "tab_id": "ess",
        "order": 50,
        "admintab": {
            "label": "ESS",                        
        }
    },
    {
        "tab_id": "general",
        "order": 45,
        "admintab": {
            "label": "General",                        
        }
    },                
    {
        "tab_id": "hr",
        "order": 40,
        "admintab": {
            "label": "HR",                        
        }
    },
    {
        "tab_id": "payroll",
        "order": 42,
        "admintab": {
            "label": "Payroll",                        
        }
    },
    {
        "tab_id": "server",
        "order": 70,
        "admintab": {
            "label": "Server",                        
        }
    }
]

import Home from 'path_to_your_tab_component/Home';
import Core from 'path_to_your_tab_component/Core'; // and so on

const components = {
    "Home": Home
    "Core": Core // and so on
}

const tabnavigator = this.state.dashboardtab.map((item, index) => {
    const TabComponent = components[item.admintab.label];   
    return <Tab.Screen name={item.admintab.label} component={TabComponent} key={index}/>                         
});