Cómo usar navigation.navigate desde un componente fuera de la pila.

Solución:

Prueba esto:

Cree un nuevo archivo llamado: RootNavigation.js

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

// file where you have the navigation

import {navigationRef} from './path/to/RootNavigation';

      <NavigationContainer ref={navigationRef}>
      .....
        <Footer />
      </NavigationContainer>

Y Footer.js debería ser algo como esto:

// Footer.js

import React from 'react';
import {View, Button} from 'react-native';
import * as RootNavigation from './path/to/RootNavigation';

const Footer= () => {
  return (
    <View>
      <Button
        title={'Go to'}
        onPress={() =>
          RootNavigation.navigate('screenName ', {userName: 'Lucy'})
        }
      />
    </View>
  );
};

export default Footer;

Para obtener más información, puede leer la documentación. https://reactnavigation.org/docs/navigating-without-navigation-prop/

De la documentación. https://reactnavigation.org/docs/connecting-navigation-prop/

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function GoToButton({ screenName }) {
  const navigation = useNavigation();

  return (
    <Button
      title={`Go to ${screenName}`}
      onPress={() => navigation.navigate(screenName)}
    />
  );
}

Los componentes fuera del Stack.Screen Los componentes no reciben el apoyo de navegación. Entonces, en este caso, debe obtener el NavigationContainer usando referencias en su componente de pie de página, de la siguiente manera:

1. Crea una referencia con const myRef = React.createRef()
2. páselo al <NavigationContainer ref={myRef}>, y
3. usa esa referencia para navegar, myRef.current?.navigate(name, params).

Todo se explica aquí. Los documentos aquí separan la creación de la referencia en un nuevo archivo, para permitirle importar la referencia sin bucles / problemas de dependencia. Como indican los documentos, ahora puede llamar RootNavigation.navigate('ChatScreen', { userName: 'Lucy' }); en cualquier módulo js, ​​no solo en un componente de reacción.

Sin embargo, en su caso, no necesita la referencia en un archivo separado.

const Stack = createStackNavigator();
const navigationRef = React.createRef();

const App = () => {    
  return (
    <Provider store={store}>
      <NavigationContainer ref={navigationRef}>
        <Header />
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{
            headerShown: false
          }}
          />
          <Stack.Screen
            name="Login"
            component={LoginScreen}
            options={{
            headerShown: false
          }}
          />
        </Stack.Navigator>
        <Footer navigationRef={navigationRef}/>
      </NavigationContainer>
    </Provider>
  );
};

Y en <Footer/> usar navigationRef.current?.navigate(name, params)

---

---

Utiliza Nuestro Buscador