如何使用 React Native Navigation (v5) 将数据发送到父页面？

Question

我在我的 GraphQL Apollo 客户端项目中使用https://reactnavigation.org/（版本 5.0.1）。

我有一个带有表单的页面，用户需要在其中从列表中选择一些选项。
在第一页中，我有一个带有以下代码的按钮：

props.navigation.navigate('SelectTagsPage', {
            onSelect: (selectedIds) => {
              // update the form state
              setTagsIds(selectedIds)
            },
          });

在标签页面上，我有这个：

const { onSelect } = props.route.params;

//...

<Button onPress={() => { onSelect(ids) }}>

所以，基本上我在调用 时传递了一个函数navigation.navigate，我正在执行这个函数以将数据发送回初始屏幕。

这工作得很好，但是当我打开标签页时，我收到了这个警告：

我们在导航状态中发现了不可序列化的值，这可能会破坏诸如持久化和恢复状态之类的用法。如果您在 params 中传递不可序列化的值（例如函数、类实例等），则可能会发生这种情况

如果在 params 中传递函数是一个问题，那么实现将数据从页面发送到父页面的相同功能并解决此警告消息的最佳方法是什么？

Answer 1

您可以将它们作为参数传递：

navigation.navigate('NameOfPreviousScreen', { selectedIds });

当您navigate转到上一个屏幕时，它的作用类似于goBack，但也会传递您想要的任何参数。

https://reactnavigation.org/docs/en/params.html