chicos, tengo una pregunta sobre la navegación en reaccionar nativo. Así que principalmente uso TabNavigator. Tengo 2 navegadores de pila principal en la aplicación
const Tab = createBottomTabNavigator(); export default function App() { return ( <NavigationContainer> <Tab.Navigator> <Tab.Screen name="Home" component={HomeStackScreen} /> <Tab.Screen name="Profile" component={ProfileStackScreen} /> </Tab.Navigator> </NavigationContainer> ); }En mi pantalla ProfileStack, también tengo dos páginas: MyProfile y UsersProfile:
const ProfileStack = createNativeStackNavigator(); function ProfileStackScreen({route, navigation}) { return ( <ProfileStack.Navigator initialRouteName="MyProfile"> <ProfileStack.Screen name="MyProfile" component={MyProfilePage} /> <ProfileStack.Screen name="UserProfile" component={UserProfilePage} options={{ headerLeft: () => (<View> <Button title="back" onPress={() => {navigation.goBack()}}/> </View>) }}/> </ProfileStack.Navigator> ); } Ahora quiero navegar desde HomeScreen a UserProfilePage y pasar parámetros a esta pantalla. Lo estoy haciendo así:
function HomeScreen({ navigation }) { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Home screen this</Text> <Button title="Go to another user profile" onPress={() => navigation.navigate('Profile', {screen: 'UserProfile', params: {userId: 1235}})} /> </View> ); } Así que ahora, cuando llego a la página UserProfile , veo que también carga la página de Profile , y solo por un segundo veo parpadear ProfilePage y su interfaz de usuario que no es genial, ¿debería ser así? Supongo que no. Luego, si presiono el botón ATRÁS en UsersProfilePage , estoy navegando de regreso a HomeScreen, ¡y esto está bien! ¡Esto es lo que espero!
Pero ahora, si presiono ProfileTab , solo veo UsersProfilePage pero no MyProfilePage . Cuando vuelvo a pulsar el botón ATRÁS, vuelvo a la HomeScreen de inicio, lo cual es raro para mí. ¿Puedes explicar por qué sucede? Por qué no vuelvo a MyProfilePage .
Preparé un bocadillo de exposición aquí . Puede reproducir este comportamiento.
Esto se debe a que está navegando a una pantalla en un navegador anidado. Está ignorando la ruta inicial. Luego, cuando presiona la pestaña nuevamente, aún está montado y aún tendrá el estado de ruta anterior, que es solo la pantalla sin la pantalla inicial.
De forma predeterminada, cuando navega por una pantalla en el navegador anidado, la pantalla especificada se usa como pantalla inicial y se ignora la prop de ruta inicial en el navegador. Este comportamiento es diferente al de React Navigation 4.
Si necesita representar la ruta inicial especificada en el navegador, puede deshabilitar el comportamiento de usar la pantalla especificada como pantalla inicial configurando initial: false:
navigation.navigate('Root', { screen: 'Settings', initial: false, });Consulte https://reactnavigation.org/docs/nesting-navigators/#rendering-initial-route-defined-in-the-navigator y https://reactnavigation.org/docs/navigation-lifecycle/