javascript - 如何使用 React Native Navigation (v5) 向父页面发送数据？

Question

我正在使用 https://reactnavigation.org/ (版本 5.0.1)在我的带有 GraphQL Apollo 客户端的项目中。

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

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

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

const { onSelect } = props.route.params;

//...

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

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

这工作得很好，但是当我打开 TagsPage 时，我收到了这个警告:

We found non-serializable values in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params

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

Answer 1

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

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

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

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