Reagiere auf die Navigation goBack () und aktualisiere den übergeordneten Status

Ich habe eine Seite, auf der der Name des Benutzers angezeigt wird, wenn er angemeldet ist, oder die Option "Konto erstellen" oder "Anmelden", wenn er nicht angemeldet ist. Bildschirm wie unten

Sie können zur Seite "Anmelden" oder "Konto erstellen" navigieren. Nach erfolgreicher Anmeldung oder Registrierung navigiert es zu dieser Seite und zeigt den Benutzernamen an. Bildschirm wie unten

Derzeit speichere ich Benutzerdaten in AsyncStorage. Ich möchte dieses Feld aktualisieren, sobald sich der Benutzer erfolgreich angemeldet oder registriert hat, wenn er von der Seite umleitet.

Wie kann ich das erreichen?

Gibt es eine Möglichkeit, Parameter von zu übergeben, navigate.goBack()und Eltern können die Parameter abhören und ihren Status aktualisieren?

Sie können eine Rückruffunktion als Parameter übergeben, wenn Sie die Navigation wie folgt aufrufen:

  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();
  }

Und definieren Sie Ihre Rückruffunktion:

refresh() {
  this.doSomething();
}

Dann können Sie in der Anmelde- / Registrierungsansicht vor goBack Folgendes tun:

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

Update für React Navigation v5:

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

Gibt es eine Möglichkeit, Parameter von zu übergeben, navigate.goback()und Eltern können die Parameter abhören und ihren Status aktualisieren?

Sie können eine Rückruffunktion als Parameter übergeben (wie in anderen Antworten erwähnt).

Hier ist ein klareres Beispiel : Wenn Sie von A nach B navigieren und möchten, dass B Informationen an A zurückgibt, können Sie einen Rückruf übergeben (hier 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} />;
  }
}

Hut ab für Debrice - Siehe https://github.com/react-navigation/react-navigation/issues/288#issuecomment-315684617

Bearbeiten

Für 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} />;
  }
}

Versuchen Sie dies für diejenigen, die nicht über Requisiten verwalten möchten. Es wird jedes Mal aufgerufen, wenn diese Seite angezeigt wird.

Hinweis * (Dies gilt nicht nur für goBack, sondern wird bei jedem Aufrufen dieser Seite aufgerufen.)

import { NavigationEvents } from 'react-navigation';

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

Ich hatte ein ähnliches Problem. Deshalb habe ich es hier gelöst, indem ich näher auf Details eingegangen bin.

Option 1 besteht darin, mit Parametern zurück zum übergeordneten Element zu navigieren. Definieren Sie einfach eine Rückruffunktion wie folgt in der übergeordneten Komponente :

updateData = data => {
  console.log(data);
  alert("come back status: " + data);
  // some other stuff
};

und navigiere zum Kind:

onPress = () => {
  this.props.navigation.navigate("ParentScreen", {
    name: "from parent",
    updateData: this.updateData
  });
};

Jetzt im Kind kann es genannt werden:

 this.props.navigation.state.params.updateData(status);
 this.props.navigation.goBack();

Option zwei. Um Daten von einer Komponente abzurufen, kann AsyncStorage, wie in der anderen Antwort erläutert, entweder synchron verwendet werden oder nicht.

Sobald die Daten gespeichert sind, können sie überall verwendet werden.

// to get
AsyncStorage.getItem("@item")
  .then(item => {
    item = JSON.parse(item);
    this.setState({ mystate: item });
  })
  .done();
// to set
AsyncStorage.setItem("@item", JSON.stringify(someData));

oder verwenden Sie entweder eine asynchrone Funktion, um sie selbst zu aktualisieren, wenn sie auf diese Weise einen neuen Wert erhält.

this.state = { item: this.dataUpdate() };
async function dataUpdate() {
  try {
    let item = await AsyncStorage.getItem("@item");
    return item;
  } catch (e) {
    console.log(e.message);
  }
}

Weitere Informationen finden Sie in den AsyncStorage-Dokumenten .

BEARBEITET: Die beste Lösung ist die Verwendung von NavigationEvents . Sie müssen keine Listener manuell erstellen :)

Das Aufrufen einer Rückruffunktion wird nicht dringend empfohlen. Überprüfen Sie dieses Beispiel mit einem Listener (Denken Sie daran, alle Listener mit dieser Option aus componentWillUnMount zu entfernen.)

Komponente A.

navigateToComponentB() {
  const { navigation } = this.props
  this.navigationListener = navigation.addListener('willFocus', payload => {
    this.removeNavigationListener()
    const { state } = payload
    const { params } = state
    //update state with the new params
    const { otherParam } = params
    this.setState({ otherParam })
  })
  navigation.push('ComponentB', {
    returnToRoute: navigation.state,
    otherParam: this.state.otherParam
  })
}
removeNavigationListener() {
  if (this.navigationListener) {
    this.navigationListener.remove()
    this.navigationListener = null
  }
}
componentWillUnmount() {
  this.removeNavigationListener()
}

Komponente B.

returnToComponentA() {
  const { navigation } = this.props
  const { routeName, key } = navigation.getParam('returnToRoute')
  navigation.navigate({ routeName, key, params: { otherParam: 123 } })
}

Weitere Informationen zum vorherigen Beispiel: https://github.com/react-navigation/react-navigation/issues/288#issuecomment-378412411

Grüße, Nicholls

Ich habe gerade die Standardnavigationsfunktion verwendet, die den Namen der ViewA-Route angibt und die Parameter übergibt. Ich habe genau das getan, was goBack getan hätte.

this.props.navigation.navigate("ViewA", 
{
     param1: value1, 
     param2: value2
});

Wenn Sie verwenden redus, können Sie eine Aktion zum Speichern von Daten und Überprüfen des Werts im übergeordneten Element erstellen Componentoder verwendenAsyncStorage .

Aber ich denke, es ist besser, nur JSON-serializableParameter zu übergeben, denn wenn Sie eines Tages den Navigationsstatus speichern möchten, ist dies nicht sehr einfach.

Beachten Sie react-navigationauch, dass diese Funktion in experimentellem https://reactnavigation.org/docs/en/state-persistence.html enthalten ist

Jeder Parameter, jede Route und jeder Navigationsstatus muss vollständig JSON-serialisierbar sein, damit diese Funktion funktioniert. Dies bedeutet, dass Ihre Routen und Parameter keine Funktionen, Klasseninstanzen oder rekursiven Datenstrukturen enthalten dürfen.

Ich mag diese Funktion im Entwicklungsmodus und wenn ich Parameter als Funktion übergebe, kann ich sie einfach nicht verwenden

Erster Bildschirm

updateData=(data)=>{
    console.log('Selected data',data)
}   

this.props.navigation.navigate('FirstScreen',{updateData:this.updateData.bind(this)})

Zweiter Bildschirm

// use this method to call FirstScreen method 
execBack(param) {
    this.props.navigation.state.params.updateData(param);
    this.props.navigation.goBack();
}

Ich würde auch navigation.navigate verwenden. Wenn jemand das gleiche Problem hat und auch verschachtelte Navigatoren verwendet , würde dies folgendermaßen funktionieren:

onPress={() =>
        navigation.navigate('MyStackScreen', {
          // Passing params to NESTED navigator screen:
          screen: 'goToScreenA',
          params: { Data: data.item },
        })
      }

Verwenden Sie in React Navigation v5 einfach die Navigationsmethode. Aus den Dokumenten :

Um dies zu erreichen, können Sie die Navigationsmethode verwenden, die sich wie goBack verhält, wenn der Bildschirm bereits vorhanden ist. Sie können die Parameter mit navigieren übergeben, um die Daten zurückzugeben

Vollständiges Beispiel:

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

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function ScreenA ({ navigation, route }) {
  const { params } = route;

  return (
    <View style={styles.container}>
      <Text>Params: {JSON.stringify(params)}</Text>
      <Button title='Go to B' onPress={() => navigation.navigate('B')} />
    </View>
  );
}

function ScreenB ({ navigation }) {
  return (
    <View style={styles.container}>
      <Button title='Go to A'
        onPress={() => {
          navigation.navigate('A', { data: 'Something' })
        }}
      />
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator mode="modal">
        <Stack.Screen name="A" component={ScreenA} />
        <Stack.Screen name="B" component={ScreenB} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});