React Native技术问题：如何在关闭Modal前切换当前屏幕？

核心逻辑很直接：在触发Modal关闭的操作（比如点击关闭按钮）时，先执行屏幕切换逻辑，再关闭Modal。因为Modal是悬浮在页面上层的容器，屏幕切换会在后台完成，用户看不到切换过程，等Modal关闭后就能直接看到已经切换好的Screen2。

不同场景的实现示例 #

Web前端（React + React Router） #

import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

function Screen1() {
  const navigate = useNavigate();
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleCloseModal = () => {
    // 第一步：切换到Screen2
    navigate('/screen2');
    // 第二步：关闭Modal
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>打开Modal</button>
      {isModalOpen && (
        <div className="modal">
          <div className="modal-content">
            <button onClick={handleCloseModal}>关闭</button>
          </div>
        </div>
      )}
    </div>
  );
}

React Native场景 #

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

function Screen1() {
  const navigation = useNavigation();
  const [modalVisible, setModalVisible] = useState(false);

  const closeModalAndSwitch = () => {
    // 先执行页面跳转
    navigation.navigate('Screen2');
    // 再关闭Modal
    setModalVisible(false);
  };

  return (
    <View>
      <Button title="打开Modal" onPress={() => setModalVisible(true)} />
      <Modal visible={modalVisible}>
        <View>
          <Button title="关闭" onPress={closeModalAndSwitch} />
        </View>
      </Modal>
    </View>
  );
}

注意点 #

• 确保屏幕切换的逻辑是快速完成的，避免在切换前做大量异步请求。如果必须有异步操作，可以先显示Modal内的加载状态，等异步操作完成后再执行切换+关闭Modal的步骤。
• 如果使用状态管理工具（如Redux、Zustand），要保证Screen2渲染所需的状态在切换前已经准备就绪，避免页面渲染异常。

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