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

Question

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

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

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

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

Answer 1

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

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

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

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

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

How to send data to the parent page using React Native Navigation (v5)?

javascript

react-native

react-native-navigation

react-navigation