Я пытаюсь сделать динамический 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;
В результате появляется такая ошибка:
Ошибка: Не удалось найти экраны для навигатора. Вы определили какие-либо экраны как его дочерние элементы?
Что-то не так с кодом, который я сделал?
Поскольку ошибка указывает, что у вас нет экранов внутри 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>
Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, отредактируйте , чтобы добавить дополнительные сведения, такие как цитаты или документация, чтобы другие могли подтвердить правильность вашего ответа. Вы можете найти больше информации о том, как писать хорошие ответы в справочном центре.