i'm currently working on a React Native App, it has two Main Screens, the main navigator is a Tab Navigator. The second main screen has its own NativeStack Navigator.My Problem is, that the Second Navigator doesn't show anything. I just get a empty screen.
Second Screen Code:
import {DataTable, Header, Screen} from '../../components';import { NativeStackNavigationProp, createNativeStackNavigator,} from '@react-navigation/native-stack';import {ScrollView, StyleSheet, View, ViewStyle} from 'react-native';import {EditorCreate} from '../Editor/Create';import React from 'react';import {useDatabase} from '../../data';import {useNavigation} from '@react-navigation/native';type TProps = NativeStackNavigationProp<{}>;const ReportStack = createNativeStackNavigator();interface IStyle { container: ViewStyle; header: ViewStyle; dataList: ViewStyle; dataControls: ViewStyle;}/** * @description Report Bildschirm * @author OliverKarger * @param {IProps} props * @return {React.FC} */export function ReportScreen(props: TProps) { const data = useDatabase({query: 'SELECT * FROM ENTRIES'}).data; const navHook = useNavigation(); const style = StyleSheet.create<IStyle>({ container: { flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }, header: { flex: 1, }, dataList: { flex: 4, // backgroundColor: 'red', width: '100%', height: '85%', }, dataControls: { flex: 1, // backgroundColor: 'green', flexDirection: 'row', }, }); /** * @description Verarbeitet den "Edit Button" Klick * @author OliverKarger * @param {any} itemId Item Index */ function editItemButton(itemId: any) { navHook.navigate('Editor', {action: 'edit', itemId: itemId}); } /** * @description Report Area Funktion * @author OliverKarger * @return {React.FC} */ function reportArea(): JSX.Element { return (<View style={style.dataList}><ScrollView><DataTable editItemButton={editItemButton} data={data} style={{flex: 1}} /></ScrollView></View> ); } return (<Screen style={style.container}><Header /><ReportStack.Navigator initialRouteName='create'><ReportStack.Screen name='reportarea' component={reportArea} /><ReportStack.Screen name='create' component={EditorCreate} /></ReportStack.Navigator></Screen> );}Code of the Main Navigator:
import {EditorScreen, HomeScreen, ReportScreen} from './screens';import {Header} from './components';import Icon from 'react-native-vector-icons/AntDesign';import {NavigationContainer} from '@react-navigation/native';import React from 'react';import {SafeAreaView} from 'react-native-safe-area-context';import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';import {createNativeStackNavigator} from '@react-navigation/native-stack';// import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';// import {createNativeStackNavigator} from '@react-navigation/native-stack';const Tab = createBottomTabNavigator();/** * @description Haupt Klasse, enthält primären App Code * @return {React.FC} */export default function App() { Icon.loadFont(); return (<SafeAreaView style={{flex: 1, marginTop: '15%'}}><NavigationContainer><Tab.Navigator screenOptions={({route}) => ({ tabBarIcon: ({focused, color, size}) => { const iconName: string = ''; if (route.name === 'Home') { if (focused) { return <Icon name='home' size={28} />; } else { return <Icon name='user' size={28} />; } } if (route.name === 'Report') { if (focused) { return <Icon name='folderopen' size={28} />; } else { return <Icon name='folder1' size={28} />; } } return <Icon name={iconName} size={28} />; }, headerShown: false, })} initialRouteName='Home'><Tab.Screen name='Home' component={HomeScreen} /><Tab.Screen name='Report' options={{title: 'Übersicht'}} component={ReportScreen} /></Tab.Navigator></NavigationContainer></SafeAreaView> );}Can anyone help me with this?
Greetings,Oliver