React Navigation页面切换状态不卸载、页面随机弹出问题求助

问题1：Screen A返回后数据不更新，状态未重置 #

我之前也踩过React Native Navigation同一栈内页面切换的坑，核心原因是Screen A被push到栈底后并没有被卸载——你之前在离开时重置状态、设置isMounted的操作其实根本没触发（因为componentWillUnmount没执行），而且第一次进入时的componentDidMount也不会重复执行。

解决办法是利用React Navigation的页面聚焦事件，每次Screen A重新获得焦点时主动拉取最新数据：

如果是类组件： #

componentDidMount() {
  // 监听页面聚焦事件
  this.focusListener = this.props.navigation.addListener('focus', () => {
    // 每次聚焦时重新获取Firebase数据
    this.fetchLatestUserData();
  });
}

componentWillUnmount() {
  // 页面真正卸载时移除监听
  this.focusListener();
}

fetchLatestUserData = async () => {
  // 你的Firebase数据获取逻辑，比如：
  const userData = await firebase.database().ref(`users/${currentUserId}`).once('value');
  this.setState({ userData: userData.val() });
};

如果是函数组件： #

用useFocusEffect钩子（需要从@react-navigation/native导入）：

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

// 在组件内部添加
useFocusEffect(
  useCallback(() => {
    const fetchLatestUserData = async () => {
      const userData = await firebase.database().ref(`users/${currentUserId}`).once('value');
      setState({ userData: userData.val() });
    };
    fetchLatestUserData();
  }, [])
);

这样每次从Screen B返回Screen A时，页面一聚焦就会重新拉取最新的筛选后数据，不用重启应用。

问题2：Gifted Chat页面随机弹出（非聊天状态时） #

这个问题大概率是Firebase实时数据库的消息监听没有在页面卸载时移除，导致即使你不在聊天页面，新消息触发监听回调后，可能不小心触发了导航逻辑（或者Gifted Chat的状态更新导致页面被唤起）。

解决思路是：在聊天页面挂载时添加消息监听，页面卸载时必须移除监听，同时确保回调里的逻辑只在当前页面激活时执行。

类组件示例： #

componentDidMount() {
  // 建立消息监听
  this.messagesRef = firebase.database().ref('chat/messages');
  this.messageSubscription = this.messagesRef.on('child_added', (snapshot) => {
    // 先判断当前页面是否在活跃状态（保险起见）
    if (this.props.isFocused) {
      // 更新Gifted Chat的消息列表
      this.setState(prevState => ({
        messages: GiftedChat.append(prevState.messages, snapshot.val())
      }));
    }
  });
}

componentWillUnmount() {
  // 必须移除监听！否则会内存泄漏+触发不必要的回调
  this.messagesRef.off('child_added', this.messageSubscription);
}

函数组件示例： #

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

const ChatScreen = () => {
  const isFocused = useIsFocused();
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const messagesRef = firebase.database().ref('chat/messages');
    const subscription = messagesRef.on('child_added', (snapshot) => {
      // 只有当前页面聚焦时才更新消息
      if (isFocused) {
        setMessages(prev => GiftedChat.append(prev, snapshot.val()));
      }
    });

    // 清理函数：页面卸载时移除监听
    return () => {
      messagesRef.off('child_added', subscription);
    };
  }, [isFocused]);

  // ...其他Gifted Chat代码
};

另外，检查一下你的消息监听回调里有没有自动导航到聊天页面的逻辑，如果有的话，一定要加条件判断（比如只在消息接收者是当前用户，且用户不在聊天页面时才提示，而不是直接跳转），这样就不会随机弹出聊天页面了。

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