React Native模态屏下滑关闭时执行指定函数的实现方案

现有路由配置代码 #

const HomeStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="MainScreen"
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen name="MainScreen" component={MainScreen} />
      <Stack.Screen
        name="ModalScreen"
        component={ModalScreen}
        options={{
          presentation: 'modal',
          gestureEnabled: false,
        }}
      />
    </Stack.Navigator>
  );
};

export default HomeStack 

需求说明 #

当前从MainScreen导航至ModalScreen时，因配置了presentation:'modal'，模态屏会以悬浮形式显示在主屏幕前方。开启gestureEnabled: true后，用户可通过下滑操作关闭模态屏。现需实现一个自定义函数，要求该函数在ModalScreen被下滑关闭时自动触发。

解决方案 #

方法一：利用useFocusEffect监听组件失焦

在ModalScreen内部，通过React Navigation的useFocusEffect钩子监听组件失焦事件——下滑关闭模态屏时，组件会失去焦点，此时执行自定义函数。

import { useFocusEffect } from '@react-navigation/native';
import React from 'react';
import { View } from 'react-native';

const ModalScreen = () => {
  // 自定义执行函数
  const handleModalClose = () => {
    console.log('模态屏已通过下滑关闭');
    // 在此编写你的业务逻辑
  };

  useFocusEffect(
    React.useCallback(() => {
      // 组件失焦时触发（下滑关闭模态屏会触发此回调）
      return handleModalClose;
    }, [])
  );

  return (
    <View>
      {/* 模态屏UI代码 */}
    </View>
  );
};

方法二：监听导航栈状态变化

在路由组件HomeStack中，通过useNavigationState监听路由栈的变化，当ModalScreen被移除出栈时执行自定义函数。

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

const HomeStack = () => {
  const navigationState = useNavigationState(state => state);

  React.useEffect(() => {
    // 检查当前路由栈中是否存在ModalScreen
    const isModalActive = navigationState.routes.some(route => route.name === 'ModalScreen');
    if (!isModalActive) {
      console.log('模态屏已通过下滑关闭');
      // 在此编写你的业务逻辑
    }
  }, [navigationState.routes]);

  return (
    <Stack.Navigator
      initialRouteName="MainScreen"
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen name="MainScreen" component={MainScreen} />
      <Stack.Screen
        name="ModalScreen"
        component={ModalScreen}
        options={{
          presentation: 'modal',
          gestureEnabled: true, // 必须开启下滑手势
        }}
      />
    </Stack.Navigator>
  );
};

方法三：使用beforeRemove导航事件

React Navigation提供的beforeRemove事件会在屏幕被移除前触发，适合处理此类场景。

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

const ModalScreen = () => {
  const navigation = useNavigation();

  React.useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', () => {
      console.log('模态屏已通过下滑关闭');
      // 在此编写你的业务逻辑
      // 若无需阻止关闭操作，无需调用e.preventDefault()
    });

    // 组件卸载时取消监听
    return unsubscribe;
  }, [navigation]);

  return (
    <View>
      {/* 模态屏UI代码 */}
    </View>
  );
};

注意：所有方案都需要先将gestureEnabled设置为true，否则下滑关闭手势不会生效。

内容的提问来源于stack exchange，提问作者Assat