Tengo una pantalla que llamó useEffect cuando se representó por primera vez en el flujo. La segunda vez que navego a la pantalla en el flujo, use Effect no se llama, pero quiero llamar a una función la primera vez antes, después o durante la función de renderizado cuando navegamos por segunda vez a la misma pantalla.
Aquí está la llamada de navegación para cada vez que navegue a esta pantalla desde varias pantallas
navigation.navigate("x", { u:type, s:title});La siguiente es la estructura de mi pantalla. No estoy usando componentes sino funciones con navegación.
const x = ({ navigation}) => { ... return ( <View style={styles.a}> ... </View> ); }; export default x;El problema aquí es que una pantalla remains mounted in react-native después de la navegación inicial. Por lo tanto, un useEffect con una matriz de dependencia vacía no se llamará posteriormente en la navegación.
Tenga en cuenta que este comportamiento difiere de la web .
Si viene a reaccionar a la navegación desde un fondo web, puede suponer que cuando el usuario navega de la ruta A a la ruta B, A se desmontará (se llama a su componenteWillUnmount) y A se montará nuevamente cuando el usuario regrese a él. Si bien estos métodos de ciclo de vida de React siguen siendo válidos y se usan en la navegación de reacción, su uso difiere del de la web.
La forma recomendada de resolver esto se describe aquí . Para su caso, esto se puede resolver de la siguiente manera.
import { useFocusEffect } from '@react-navigation/native'; const x = ({ navigation}) => { useFocusEffect( React.useCallback(() => { // called when screen is focused, thus everytime on navigation return () => { // unfocus... cleanup ... or whatever }; }, []) ); ... return ( <View style={styles.a}> ... </View> ); }; export default x;useEffect se llamará en la primera carga de su componente funcional o cuando se cambie alguna dependencia. Todo sigue igual, por lo que su useEffect no funcionará. Considere usar useFocusEffect de react-navigation lib en su lugar.