向后轻扫执行操作（反应导航）

Question

在反应导航中，知道有一种方法可以在按下后退按钮时执行自定义操作。当用户滑动回到上一屏幕时，是否有类似的方法来执行此操作？

Answer 1

React Navigation 5.7 引入了一种简单的方法来执行此操作，无需覆盖后退操作或滑动手势，基本上您可以在组件中拦截后退操作并在其发生之前执行回调：

import {useNavigation} from '@react-navigation/native';

const MyScreenComponent = (props) => {
  const navigation = useNavigation();

  React.useEffect(() => (
    navigation.addListener('beforeRemove', (e) => {
      // Prevent default behavior of leaving the screen (if needed)
      e.preventDefault();

      // Do whatever...
    })
  ), [navigation]);

  // Rest of component
}

在此示例中，我使用useNavigation钩子来访问navigation对象，但您也可以从道具中提取它，这实际上取决于您的应用程序的构建方式。

官方文档。

Answer 2

我能够确定该应用程序是通过后退按钮返回还​​是通过路由器的getStateForAction函数向后滑动。尝试检查动作和状态变量，以在需要时对其进行微调。

export const ScreensStack = StackNavigator(
{
    Login: {screen: LoginScreen},
    Schedule: {screen: ScheduleScreen},
}

/**
 * Intercept actions occuring in the screen stack.
 */
const getStateForActionScreensStack = ScreensStack.router.getStateForAction;

ScreensStack.router = {
    ...ScreensStack.router,
    getStateForAction(action, state) {
      if (action.type == 'Navigation/BACK') {
        console.log('We are going back...');
      }
      return getStateForActionScreensStack(action, state);
    },
};