React Native：导航返回后保持Modal显示并解决无法重开问题

问题根源 #

当从TestingScreen导航到UserProfile时，TestingScreen组件会被卸载，导致内部的modalVisible状态丢失。返回时组件重新渲染，状态重置为初始值false，因此Modal消失。原代码中基于useIsFocused的逻辑无法解决这个问题——返回时modalVisible已经是false，条件判断无法触发。

解决方案 #

可通过状态持久化或全局状态管理两种方式解决，以下是具体实现：

方案一：使用AsyncStorage持久化状态

将Modal状态保存到本地存储，组件卸载后状态不会丢失，返回时读取并恢复。

1. 安装依赖（Expo项目无需额外配置）：

npx expo install @react-native-async-storage/async-storage

2. 修改TestingScreen代码：

import { useRouter } from "expo-router";
import React, { useEffect, useState } from "react";
import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import AsyncStorage from '@react-native-async-storage/async-storage';

const TestingScreen = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const route = useRouter();

  // 组件挂载时读取本地存储的Modal状态
  useEffect(() => {
    const loadModalState = async () => {
      const savedState = await AsyncStorage.getItem('modalVisible');
      if (savedState !== null) {
        setModalVisible(JSON.parse(savedState));
      }
    };
    loadModalState();
  }, []);

  // Modal状态变化时保存到本地存储
  useEffect(() => {
    const saveModalState = async () => {
      await AsyncStorage.setItem('modalVisible', JSON.stringify(modalVisible));
    };
    saveModalState();
  }, [modalVisible]);

  return (
    <SafeAreaView style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text onPress={() => route.navigate("/user/user-profile")}>
              go to user-profile
            </Text>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => setModalVisible(!modalVisible)}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      <Pressable
        style={[styles.button, styles.buttonOpen]}
        onPress={() => setModalVisible(true)}
      >
        <Text style={styles.textStyle}>Show Modal</Text>
      </Pressable>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  buttonOpen: {
    backgroundColor: "#F194FF",
  },
  buttonClose: {
    backgroundColor: "#2196F3",
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  }
});

export default TestingScreen;

方案二：使用全局状态管理（Zustand）

通过全局状态容器存储Modal状态，组件卸载后状态依然保留，适合不需要持久化到本地的场景。

1. 安装依赖：

npm install zustand

2. 创建全局状态store（例如src/store/modalStore.js）：

import { create } from 'zustand';

export const useModalStore = create((set) => ({
  isModalOpen: false,
  setIsModalOpen: (value) => set({ isModalOpen: value }),
}));

3. 修改TestingScreen代码：

import { useRouter } from "expo-router";
import React from "react";
import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useModalStore } from '../store/modalStore'; // 导入全局store

const TestingScreen = () => {
  const { isModalOpen, setIsModalOpen } = useModalStore();
  const route = useRouter();

  return (
    <SafeAreaView style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={isModalOpen}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
          setIsModalOpen(!isModalOpen);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text onPress={() => route.navigate("/user/user-profile")}>
              go to user-profile
            </Text>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => setIsModalOpen(!isModalOpen)}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      <Pressable
        style={[styles.button, styles.buttonOpen]}
        onPress={() => setIsModalOpen(true)}
      >
        <Text style={styles.textStyle}>Show Modal</Text>
      </Pressable>
    </SafeAreaView>
  );
};

// 样式部分同上，省略
export default TestingScreen;

额外优化提示 #

• SafeAreaProvider应放在App的根组件（如layout.js），无需在每个页面重复添加。
• 使用全局状态时，记得在不需要Modal时重置状态，避免影响其他页面。

内容的提问来源于stack exchange，提问作者kevin sierra castro