Send props on navigation goBack

问题

Basically I have three screens, the first is a stack navigator:

const stackNav = createStackNavigator({
    Main: {
        screen: MainScreen,
        navigationOptions:({navigation}) => ({
            header: null,
        })
    },
    Detail: {
        screen: DetailScreen,
        navigationOptions: (props) => ({
            title: "Detail",
        })
    }
})

The second one I have a button to go to the Detail screen:

<TouchableOpacity onPress={() => this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle})}>

The last one is just information, I would like to click a button and execute: this.props.navigation.goBack(), but sending props to the second screen (MainScreen), a setState and a integer id, how can I do that?

--EDIT WITH PARAMS--

I have this function in MainScreen:

handleOrdem(texto) {
    console.log('texto: '+texto)
    this.setState({
        param: global.ordemAtiva,
        ordemAtiva: !this.state.ordemAtiva
    });
}
//The onPress code:
onPress={() => this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle, ordemFunc: () => this.handleOrdem()})}>

and this is how I call it in Detail.screen:

execBack(param){
    console.log('param: '+param);
    this.props.navigation.state.params.ordemFunc(param);
    this.props.navigation.goBack();
}
//Button to do it
onPress={() => this.execBack('test')}

回答1:

Create a Method in parent screen

returnData(){
    PERDROM_EVENT_WITH_RECEIVED_DATA
}

Then bind this method returnData with navigation code while executing navigation code

this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle , returnData: this.returnData.bind(this)})}

In child Component call returnData method before call of goBack()

this.props.navigation.state.params.returnData(RETURN_DATA_YOU_WANT);
this.props.navigation.goBack();

Handling return data

Suppose you want two parameters back then add two parms in returnData() method

For example we took first param is boolean and second param String

 returnData(flag,id){
    USE THIS `flag` and `id` to update state or method call or 
    What ever you wanted too.
}

And inside Child component pass these two param

 this.props.navigation.state.params.returnData(VALUE_OF `flag`, Value of `id`);

FOR EDIT WITH PARAMS

replace your code of navigation with this line

this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle, ordemFunc: this.handleOrdem.bind(this)})>

You have to bind method not to call with arrow function

So the problem is

ordemFunc: () => this.handleOrdem()

Replace this line with

ordemFunc: this.handleOrdem.bind(this)

回答2:

I came across this exact same issue and the problem is actually quite simple. We will utilise a callback for passing the params when we trigger goBack()

For example lets say I have two Views: ViewA and ViewB. For which I will do as follows:

import useNavigation hook for setting up navigation.
When navigating to the next screen pass a callback ie: function with the specified paramaters for the values you would like to pass back to ViewA.
In ViewB use the route prop to get access to the params. In here you will find your callback.
Use your callback and pass in the correct arguments to your callback.
Call the navigation.goBack() to return to ViewA

In ViewA you will now have access to your value in your callback.

import React from "react";
import { View, Button } from "react-native";
import { useNavigation } from "@react-navigation/native";

const ViewA = () => {
  const navigation = useNavigation();
  return (
    <View>
      <Button
        onPress={() =>
          navigation.navigate("ViewB", {
            handleItem: (item) => console.log(item), // will log out "Your Item"
          })
        }
      />
    </View>
  );
};

const ViewB = ({ route }) => {
  const navigation = useNavigation;
  return (
    <View>
      <Button
        onPress={() => {
          route.params.handleItem("Your Item");
          navigation.goBack();
        }}
      />
    </View>
  );
};

回答3:

If you are using react-navigation v2 you no need to use navigation.goBack() to go back to Main screen

this.props.navigation.navigate('Main', { myParam: value }) will declaratively handle the navigation back (with same transition) for you

回答4:

Maybe you can save the data in the global state and call it again when you goBack

React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      console.log("its focus");
      //call the new data and update state here 
    });
    return unsubscribe;
  }, [navigation]);

来源：https://stackoverflow.com/questions/51960101/send-props-on-navigation-goback

标签

react-native

react-navigation