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

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

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

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

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

JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
Раскрытие чувствительных данных
Раскрытие чувствительных данных
Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Руководство ChatGPT по продаже мини JS-файлов
Руководство ChatGPT по продаже мини JS-файлов
JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...
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>

Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, отредактируйте , чтобы добавить дополнительные сведения, такие как цитаты или документация, чтобы другие могли подтвердить правильность вашего ответа. Вы можете найти больше информации о том, как писать хорошие ответы в справочном центре.

Community 04.11.2022 05:47

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