javascript - 错误 : Couldn't find any screens for the navigator. 您是否将任何屏幕定义为其子屏幕？

Question

我正在尝试制作动态 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/CoreScreen';
import General from '../mainscreen/GeneralScreen';
import HR from '../mainscreen/CoreScreen';
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});      
    } catch (error) {      
    }
  }

  render(){    
    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;

结果出现这样的错误:

Error: Couldn't find any screens for the navigator. Have you defined any screens as its children?

我编写的代码有问题吗？

Answer 1

由于错误表明您在 TabNavigator 内没有任何屏幕。

当组件安装时，数组为空，稍后加载数据。

所以你可以像下面这样解决这个问题

 render(){    
    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}/>                         
    });

   // Add this to return null or you can also show <ActivityIndicator/>
   if(this.state.dashboardtab.length===0)
       return null;

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

还从 componentDidMount 调用 tabnavigatorasync，而不是从构造函数调用它。

componentDidMount(){
  this.tabnavigatorasync(); 
}