React Navigation v6：滑动关闭模态框时如何向调用页面传值？

针对你遇到的问题，这里有两种实用的解决方案，覆盖下滑关闭、手动关闭等所有模态框关闭场景：

方法一：通过回调函数传值（推荐） #

打开模态框时传入一个回调函数，在模态框关闭前触发该函数传递数据，逻辑直观且易维护。

调用页面（HomeScreen）代码： #

import { useState } from 'react';
import { Button, View, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation();
  const [modalReturnValue, setModalReturnValue] = useState(null);

  // 定义接收模态框返回值的回调
  const handleModalData = (value) => {
    setModalReturnValue(value);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title="打开模态框"
        onPress={() => navigation.navigate('ModalScreen', { onClose: handleModalData })}
      />
      {modalReturnValue && (
        <Text style={{ marginTop: 20 }}>
          模态框返回的值：{modalReturnValue}
        </Text>
      )}
    </View>
  );
}

模态框页面（ModalScreen）代码： #

import { useState, useEffect } from 'react';
import { View, TextInput, Button } from 'react-native';
import { useNavigation, useRoute } from '@react-navigation/native';

function ModalScreen() {
  const navigation = useNavigation();
  const route = useRoute();
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    // 监听模态框关闭前的事件（包括下滑关闭、返回键、手动goBack）
    const unsubscribe = navigation.addListener('beforeRemove', () => {
      // 触发回调传递当前输入的值
      route.params?.onClose(inputValue);
    });

    // 组件卸载时移除监听
    return unsubscribe;
  }, [navigation, route.params, inputValue]);

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
      <TextInput
        style={{ borderWidth: 1, padding: 10, marginBottom: 20 }}
        value={inputValue}
        onChangeText={setInputValue}
        placeholder="输入要返回的值"
      />
      <Button
        title="手动关闭模态框"
        onPress={() => {
          route.params?.onClose(inputValue);
          navigation.goBack();
        }}
      />
    </View>
  );
}

方法二：通过路由参数传值 #

利用navigation.setParams给前一个页面设置参数，在调用页面监听焦点变化获取返回值。

调用页面（HomeScreen）代码： #

import { useState, useEffect } from 'react';
import { Button, View, Text } from 'react-native';
import { useNavigation, useRoute } from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation();
  const route = useRoute();
  const [modalReturnValue, setModalReturnValue] = useState(null);

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // 每次页面聚焦时，检查路由参数中的返回值
      if (route.params?.modalValue) {
        setModalReturnValue(route.params.modalValue);
        // 清空参数，避免重复读取
        navigation.setParams({ modalValue: null });
      }
    });

    return unsubscribe;
  }, [navigation, route.params]);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title="打开模态框"
        onPress={() => navigation.navigate('ModalScreen')}
      />
      {modalReturnValue && (
        <Text style={{ marginTop: 20 }}>
          模态框返回的值：{modalReturnValue}
        </Text>
      )}
    </View>
  );
}

模态框页面（ModalScreen）代码： #

import { useState, useEffect } from 'react';
import { View, TextInput } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function ModalScreen() {
  const navigation = useNavigation();
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', () => {
      // 获取前一个页面的路由key
      const prevRouteKey = navigation.getState().routes[navigation.getState().index - 1].key;
      // 给前一个页面设置参数
      navigation.setParams({ modalValue: inputValue }, prevRouteKey);
    });

    return unsubscribe;
  }, [navigation, inputValue]);

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
      <TextInput
        style={{ borderWidth: 1, padding: 10 }}
        value={inputValue}
        onChangeText={setInputValue}
        placeholder="输入要返回的值"
      />
    </View>
  );
}

关键说明： #

• beforeRemove事件会在模态框即将关闭时触发，无论关闭方式是下滑、安卓返回键还是手动调用goBack，都能捕获到。
• 方法一的回调方式更适合需要实时处理返回值的场景，方法二的参数方式适合不需要即时响应的场景。

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