React-Navigation v4 在后按时将状态从子级传递给父级答案

【问题标题】：React-Navigation v4 pass state from child to parent on back pressReact-Navigation v4 在后按时将状态从子级传递给父级
【发布时间】：2020-09-03 08:50:28
【问题描述】：

我需要将状态从子屏幕传递到父屏幕。我很难做到这一点。我让用户按下一个按钮来navigate 到子屏幕。在子屏幕中填写信息后，我正尝试使用props.navigation.goBack() 将值传递回父屏幕@ 有人可以帮我解决这个问题吗？

我正在使用反应导航 v4

父屏幕：

const Parent = (props) => {
  const [day, setDay] = useState("");

  return (
        <TouchableOpacity
            onPress={() =>props.navigation.navigate({ routeName: 'Child' })}>
        </TouchableOpacity>
  );
};

子屏幕（我想将day状态传回给父屏幕）

const Child = props => {
    const [day, setDay] = useState("");
  return (
    <View style={styles.container}>
      <TextInput onChange={(text)=> setDay(text)}/>
      <Button onPress={()=>props.navigation.goBack()}/>
    </View>
  );
};

【问题讨论】：

是否可以仅按名称导航到屏幕？所以就像你在你的父组件中做的那样？
哦，您的意思是返回导航并发送参数？但我该怎么做。我知道如何在子组件中提供参数，但在父组件中我该怎么做？
我的意思是如果它必须用 goBack 来完成......或者如果它可以用普通的 naviigation.navigate({ routeName: "Parent" }) 以某种方式这样。如果可能的话，你可以用它发送参数
请你告诉我我是怎么不知道的，因为它在给它参数时不能正常使用 naviigation.navigate({ routeName: "Parent" })

标签： react-native react-hooks react-native-android react-navigation

【解决方案1】：

如果无法使用正常的导航方式，可以尝试构建自己的返回函数并传递参数。

不妨看看这个：

  goBack() {
    const { navigation } = this.props;
    navigation.goBack();
    navigation.setParam({ day: dayData});
  }

那么调用将是：

<Button onPress={()=>this.goBack()}/>

您可以通过以下方式获取参数：

this.props.navigation.getParam("day")

以某种方式尝试这样 - 如果它不起作用，请尝试使用 this.props.navigation 调用... 或仅使用 navigation.goBack() 等等，因为我不确定哪种语法适合你。

【讨论】：