Question

基本上我有三个屏幕，第一个是堆栈导航器：

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

第二个按钮我有一个进入详细信息屏幕的按钮：

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

最后一个只是信息，我想单击一个按钮并执行： this.props.navigation.goBack()，但是将道具发送到第二个屏幕（MainScreen），一个setState和一个整数id，我该怎么做？

-使用参数编辑-

我在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()})}>

这就是我在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')}

Answer 1

在父屏幕中创建方法

returnData(){
    PERDROM_EVENT_WITH_RECEIVED_DATA
}

然后在执行导航代码时将此方法returnData与导航代码绑定

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

在调用returnData之前在子组件调用goBack()方法中

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

处理退货数据

假设您要返回两个参数，然后在returnData()方法中添加两个参数

例如，我们将第一个参数设为布尔值，将第二个参数设为String

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

在Child组件内部传递这两个参数

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

用于编辑参数

用此行替换您的导航代码

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

您必须使用bind方法不要使用箭头功能调用

问题是

ordemFunc: () => this.handleOrdem()

用

替换此行

ordemFunc: this.handleOrdem.bind(this)

Answer 2

我碰到了同样的问题，这个问题实际上很简单。当我们触发goBack（）

时，我们将利用回调函数来传递参数

例如，假设我有两个视图：ViewA和ViewB。为此，我将执行以下操作：

导入useNavigation挂钩以设置导航。
导航到下一个屏幕时，传递一个回调，即：具有指定参数的函数，用于将要传递回ViewA的值。
在ViewB中，使用route属性获取对参数的访问。在这里，您将找到回调。
使用您的回调并将正确的参数传递给您的回调。
调用navigation.goBack（）返回到ViewA

在ViewA中，您现在可以在回调中访问您的值。

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

Answer 3

如果您使用的是delete from test where id in (select id from a_table_that_contains_huge_list_of_entries)，则无需使用navigation.goBack（）返回主屏幕

react-navigation v2将以声明方式为您处理导航（具有相同的过渡）

Answer 4

也许您可以将数据保存为全局状态，然后在返回时再次调用

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

在导航goBack上发送道具

4 个答案: