Tengo un componente MainPage, y en el componente MainPage, hay componentes PostList, Post y Explain como Stack.Screen. e hice el componente Home

este es mi codigo

 const home = () => { return ( <View> <Text>home</Text> </View> ) } const MainPage = () => { return ( <Stack.Navigator> <Stack.Screen name="PostList" component={PostList} options={{headerShown: false}} /> <Stack.Screen name="Post" component={Post} options={{headerShown: false}} /> <Stack.Screen name="Explain" component={Explain} options={{ headerShown: false, }} /> </Stack.Navigator> ); };

Y MainPage está envuelto con Tab.screen.

 <Tab.Navigator> <Tab.Screen name="MainPage" component={MainPage} options={{ headerShown: false, tabBarStyle: {display: 'none'}, tabBarIcon: ({color}) => ( <FontAwesome5 name="list" size={20} style={{color}} /> ), tabBarActiveTintColor: 'blue', }} /> </Tab.Navigator>

Quiero navegar al componente Inicio usando la navegación del cajón en el componente MainPage dentro de Tab.Screen.

así que probé como este código

 <Drawer.Navigator initialRouteName="Home"> <Tab.Navigator> <Tab.Screen name="MainPage" component={MainPage} options={{ headerShown: false, }} /> </Tab.Navigator> </Drawer.Navigator>

pero no funciona ¿Cómo puedo arreglar mi código?