Ошибка: Не удалось найти экраны для навигатора. Вы определили какие-либо экраны как его дочерние элементы?

Я пытаюсь сделать динамический 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;

в результате появляется такая ошибка:

Ошибка: Не удалось найти экраны для навигатора. Вы определили какие-либо экраны как его дочерние элементы?

что-то не так с кодом, который я сделал?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
4 504
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Поскольку ошибка указывает, что у вас нет экранов внутри 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>
        )
  }

Также вызывайте tabnavigatorasync из componentDidMount, а не из конструктора.

componentDidMount(){
  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}
            />
          ),
        }}
        component = {val?.Component}
      />
    ))}
  </Tab.Navigator>
</NavigationContainer>

Другие вопросы по теме