将参数传递到 swipe/gesture 上的上一个屏幕

Question

我已经彻底阅读了有关使用 React Navigation 在屏幕之间传递参数的文档：https://reactnavigation.org/docs/params/

但是，所有这些示例仅在您手动调用 navigation.navigate 并传递参数时才有效。例如：

<Button
  title="Done"
  onPress={() => {
    // Pass and merge params back to home screen
    navigation.navigate({
     name: 'Home',
     params: { post: postText },
     merge: true,
    });
  }}
/>

我有一个带有后退按钮的屏幕，我可以在其中调用 navigation.navigate 并在按下按钮时传递参数，如上例所示。但是，用户也可以从左侧滑动返回 Android 的第一个屏幕（我假设也是 iOS）。

那么，我的问题是：

有没有办法让我在用户滑动返回时将相同的数据传递到上一个屏幕（而不是按后退按钮）？

Answer 1

可能还有我不知道的更好方法。但是，我们可以通过 preventing the default back action 手动实现并自行处理。

假设您有一个屏幕 B 并且您想要向后滑动以转到屏幕 Home 并在该滑动中将参数从 B 传递给 Home行动。然后，您可以按如下方式实现。

function B({navigation}) {

  React.useEffect(() => navigation.addListener('beforeRemove', (e) => {
         
        // the navigation.navigate will fire beforeRemove which causes an infinite loop. we guard this here
        if (e.data.action.type === "NAVIGATE") {
          return
        }
        // Prevent default behavior of leaving the screen
        e.preventDefault();
        
        // navigate manually
        navigation.navigate({
            name: 'Home',
            params: { post: postText },
            merge: true,
        });        
        
   }), [navigation]);

  return ( ... )
}

编辑： navigation.navigate 再次触发 beforeRemove 事件，显然，这会导致无限循环。我们可以如上所示保护它。

将参数传递到 swipe/gesture 上的上一个屏幕

Pass params to previous screen on swipe/gesture

react-native

react-navigation