la navigation dans les écrans de la pile modifie l'onglet inférieur pour une raison quelconque ?

Solution du problème

Dans votre code de démonstration, la navigation vers screen1affiche le bottomTabBar en bas, s'agit-il de votre cas d'utilisation requis ou d'un bogue. Je suppose que c'est un bug et que vous ne voulez pas cela.

Pour y parvenir, il est recommandé d'utiliser d'abord les écrans, puis les BottomTabs. Définissez donc vos bottomTabs screen1puis votre code existant fonctionne comme vous le souhaitez.

tu Appdevrais revenir

 <NavigationContainer>
 <Stack.Navigator
 initialRouteName="Tabs"> 
 <Stack.Screen name="Tabs" component= {MyTabs} options={{headerShown: false}}/>
 <Stack.Screen name="Screen1" component= {Screen1} options={{headerShown: false}}/> 
 <Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
 <Stack.Screen name="Screen3" component= {Screen3} options={{headerShown: false}}/>
 </Stack.Navigator>

ta MyTabsfonction doit retourner

<Tab.Navigator
 initialRouteName="Home"
 screenOptions={{
 tabBarActiveTintColor: 'white',
 tabBarInactiveTintColor: '#4d4d4d',
 tabBarStyle: {
 backgroundColor: '#d1cfcf',
 borderTopColor: 'transparent',
 },
 }} 
 >
 <Tab.Screen
 name="Home"
 component={Home}
 options={{
 tabBarLabel: 'Tab1',
 headerShown: false,
 tabBarIcon: ({ color, size }) => (
 <MaterialCommunityIcons name="home" color={color} size={size} />
 ),
 }}
 />
 <Tab.Screen
 name="Tab2"
 component={Screen2}
 options={{
 tabBarLabel: 'Tab2',
 headerShown: false,
 tabBarIcon: ({ color, size }) => (
 <MaterialCommunityIcons name="home" color={color} size={size} />
 ),
 }}
 />
 
 </Tab.Navigator>

Le code de collation de travail est ici

Edit: pour que bottomTabs soit visible même après la navigation, vous devez créer un autre Stacknavigator comme vous l'avez fait pour Tab1. votre code devrait ressembler à ceci,

const Tab = createBottomTabNavigator();
function MyTabs() {
 return (
 <Stack.Navigator initialRouteName="Home">
 <Stack.Screen
 name="Home"
 component={Home}
 options={{ headerShown: false }}
 />
 <Stack.Screen
 name="Screen1"
 component={Screen1}
 options={{ headerShown: false }}
 />
 <Stack.Screen
 name="Screen2"
 component={Screen2}
 options={{ headerShown: false }}
 />
 <Stack.Screen
 name="Screen3"
 component={Screen3}
 options={{ headerShown: false }}
 />
 </Stack.Navigator>
 );
}
function MySecondTabs() {
 return (
 <Stack.Navigator initialRouteName="Screen2">
 <Stack.Screen
 name="Home"
 component={Home}
 options={{ headerShown: false }}
 />
 <Stack.Screen
 name="Screen1"
 component={Screen1}
 options={{ headerShown: false }}
 />
 <Stack.Screen
 name="Screen2"
 component={Screen2}
 options={{ headerShown: false }}
 />
 <Stack.Screen
 name="Screen3"
 component={Screen3}
 options={{ headerShown: false }}
 />
 </Stack.Navigator>
 );
}
export default function App() {
 return (
 <NavigationContainer>
 <Tab.Navigator
 initialRouteName="Tab1"
 screenOptions={{
 tabBarActiveTintColor: 'white',
 tabBarInactiveTintColor: '#4d4d4d',
 tabBarStyle: {
 backgroundColor: '#d1cfcf',
 borderTopColor: 'transparent',
 },
 }}>
 <Tab.Screen
 name="Tab1"
 component={MyTabs}
 options={{
 tabBarLabel: 'Tab1',
 headerShown: false,
 tabBarIcon: ({ color, size }) => (
 <MaterialCommunityIcons name="home" color={color} size={size} />
 ),
 }}
 />
 <Tab.Screen
 name="Tab2"
 component={MySecondTabs}
 options={{
 tabBarLabel: 'Tab2',
 headerShown: false,
 tabBarIcon: ({ color, size }) => (
 <MaterialCommunityIcons name="home" color={color} size={size} />
 ),
 }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

code de collation de travail