Reaccionar navegación goBack () y actualizar el estado principal

Solución:

Puede pasar una función de devolución de llamada como parámetro cuando llama a navegar así:

  const DEMO_TOKEN = await AsyncStorage.getItem('id_token');
  if (DEMO_TOKEN === null) {
    this.props.navigation.navigate('Login', {
      onGoBack: () => this.refresh(),
    });
    return -3;
  } else {
    this.doSomething();
  }

Y defina su función de devolución de llamada:

refresh() {
  this.doSomething();
}

Luego, en la vista de inicio de sesión / registro, antes de goBack, puede hacer esto:

await AsyncStorage.setItem('id_token', myId);
this.props.navigation.state.params.onGoBack();
this.props.navigation.goBack();

Actualización para React Navigation v5:

await AsyncStorage.setItem('id_token', myId);
this.props.route.params.onGoBack();
this.props.navigation.goBack();

¿Hay alguna manera de pasar el parámetro desde navigate.goback() y el padre puede escuchar los parámetros y actualizar su estado?

Puede pasar una función de devolución de llamada como parámetro (como se menciona en otras respuestas).

Aquí hay más claro ejemplo, cuando navega de A a B y desea que B le comunique información a A, puede pasar una devolución de llamada (aquí onSelect):

ViewA.js

import React from "react";
import { Button, Text, View } from "react-native";

class ViewA extends React.Component {
  state = { selected: false };

  onSelect = data => {
    this.setState(data);
  };

  onPress = () => {
    this.props.navigate("ViewB", { onSelect: this.onSelect });
  };

  render() {
    return (
      <View>
        <Text>{this.state.selected ? "Selected" : "Not Selected"}</Text>
        <Button title="Next" onPress={this.onPress} />
      </View>
    );
  }
}

ViewB.js

import React from "react";
import { Button } from "react-native";

class ViewB extends React.Component {
  goBack() {
    const { navigation } = this.props;
    navigation.goBack();
    navigation.state.params.onSelect({ selected: true });
  }

  render() {
    return <Button title="back" onPress={this.goBack} />;
  }
}

Me quito el sombrero por los escombros: consulte https://github.com/react-navigation/react-navigation/issues/288#issuecomment-315684617

---

Editar

Para React Navigation v5

ViewB.js

import React from "react";
import { Button } from "react-native";

class ViewB extends React.Component {
  goBack() {
    const { navigation, route } = this.props;
    navigation.goBack();
    route.params.onSelect({ selected: true });
  }

  render() {
    return <Button title="back" onPress={this.goBack} />;
  }
}

Para aquellos que no quieren administrar a través de accesorios, intente esto. Llamará cada vez que aparezca esta página.

Nota * (esto no es solo para goBack, sino que lo llamará cada vez que ingrese a esta página).

import { NavigationEvents } from 'react-navigation';

render() {
    return (
        <View style={{ flex: 1 }}>
            <NavigationEvents
              onWillFocus={() => {
                // Do your things here
              }}
            />
        </View>
    );
}

---

---

Utiliza Nuestro Buscador