检测用户何时移动到特定屏幕反应导航

Question

我正在使用react-navigation和react-native，并且我有用于导航的底部选项卡，我有一个用于编辑一些信息的屏幕，我希望能够检测到用户何时尝试从该屏幕移动到其他“特定”屏幕触发特定动作。

我尝试过的：

useEffect(
    () =>
        navigation.addListener('blur', (e) => {
            // Prompt the user before leaving the screen
                Alert.alert('You haven’t saved your changes,[
                    { text: translate('yes'), style: 'cancel' },
                    {
                        text: translate('no'),
                        style: 'destructive',
                        onPress: () => navigation.navigate('EditProfileScreen'),
                    },
                ])
        }),
    [navigation]
)

但是当我移动到任何屏幕时上面都会触发，而我希望它只针对特定屏幕触发。 有什么见解吗？

Answer 1

您应该在离开此组件后删除侦听器，以便它不会继续到其他组件：

const checkBeforeLeaving = (e) => {
            // Prompt the user before leaving the screen
                Alert.alert('You haven’t saved your changes,[
                    { text: translate('yes'), style: 'cancel' },
                    {
                        text: translate('no'),
                        style: 'destructive',
                        onPress: () => navigation.navigate('EditProfileScreen'),
                    },
                ])
}

然后返回

useEffect()

中的清除功能，以清除组件卸载时的副作用：

useEffect(() => {
  // Adding side effect on component mount
  navigation.addListener('blur', checkBeforeLeaving);

  // Specify how to clean up after this effect on component-unmount:    
  return () => navigation.removeEventListener('blur', checkBeforeLeaving)
}, [navigation])

这样，这种副作用将仅限于该特定组件。

Answer 2

请参阅此处的官方文档：https://reactnavigation.org/docs/preventing-going-back/