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

admin管理员组

文章数量:1415119

I am trying to make dynamic tab.screen. my code is like this:

import React from 'react';
import { Text, View, TouchableOpacity, Modal } from 'react-native';
import AsyncStorage from '@react-native-munity/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 tabponents = {
  "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 tabponentsrender = tabponents[item.admintab.label];    
      return <Tab.Screen name={item.admintab.label} ponent={tabponentsrender} key={index}/>                         
    });

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

export default TabNavigator;

the result appears an error like this:

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

is there something wrong with the code i made?

I am trying to make dynamic tab.screen. my code is like this:

import React from 'react';
import { Text, View, TouchableOpacity, Modal } from 'react-native';
import AsyncStorage from '@react-native-munity/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 tabponents = {
  "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 tabponentsrender = tabponents[item.admintab.label];    
      return <Tab.Screen name={item.admintab.label} ponent={tabponentsrender} key={index}/>                         
    });

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

export default TabNavigator;

the result appears an error like this:

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

is there something wrong with the code i made?

• javascript
• react-native
• react-navigation-v5

Share Improve this question Follow edited Dec 21, 2020 at 10:51 Lelio Faieta 6,69699 gold badges4848 silver badges8484 bronze badges asked Dec 21, 2020 at 10:47 sattsatt 6311 silver badge99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

As the error states you are not having any screens inside the TabNavigator.

When the ponent is mounted the array is empty and the data is loaded later.

So you can fix this like below

 render(){    
    const tabnavigatorRender = this.state.dashboardtab.map((item, index) => {
      const tabponentsrender = tabponents[item.admintab.label];    
      return <Tab.Screen name={item.admintab.label} ponent={tabponentsrender} 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>
        )
  }

Also call the tabnavigatorasync from ponentDidMount instead of calling it from the constructor.

ponentDidMount(){
  this.tabnavigatorasync(); 
}

  <NavigationContainer>
  <Tab.Navigator
    screenOptions={{
      headerShown: false,
      tabBarActiveTintColor: '#A968EE',
      tabBarStyle: {
        position: 'absolute',
        backgroundColor: 'black',
      },
    }}>
    {data?.map((val, index) => (
      <Tab.Screen
        key={index}
        name={val?.Name}
        options={{
          tabBarLabel: val?.Name,
          tabBarIcon: () => (
            <Image
              style={{
                height: 20,
                width: 20,
              }}
              source={val?.ImageSource}
            />
          ),
        }}
        ponent={val?.Component}
      />
    ))}
  </Tab.Navigator>
</NavigationContainer>

本文标签：