如何从编辑页返回Bottom Tab Navigator的Account标签时重新加载组件

问题原因 #

你设置的unmountOnBlur: true仅在切换底部标签时才会卸载Account对应的Profile组件，而从编辑页返回Account属于同一标签栈内的页面跳转，不会触发标签的blur/focus动作，因此组件不会重新挂载，也就不会刷新数据。

解决方案 #

方案1：监听组件的focus事件（推荐）

在Profile组件中使用React Navigation提供的useFocusEffect或navigation.addListener监听焦点事件，每次组件获得焦点时重新拉取最新的个人资料数据：

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

const Profile = ({ navigation }) => {
  const [profileData, setProfileData] = useState({});

  // 定义获取最新资料的函数
  const fetchLatestProfile = async () => {
    // 替换成你的实际数据获取逻辑（API请求/本地存储读取）
    const response = await fetch('/api/user/profile');
    const data = await response.json();
    setProfileData(data);
  };

  // 使用useFocusEffect，每次组件获取焦点时执行
  useFocusEffect(
    useCallback(() => {
      fetchLatestProfile();
    }, [])
  );

  // 或者用navigation.addListener的方式（效果一致）
  // useEffect(() => {
  //   const unsubscribe = navigation.addListener('focus', () => {
  //     fetchLatestProfile();
  //   });
  //   return unsubscribe;
  // }, [navigation]);

  return (
    // 你的个人资料渲染逻辑
    <View>
      <Text>姓名：{profileData.name}</Text>
      <Button 
        title="编辑个人资料" 
        onPress={() => navigation.navigate('EditProfile')} 
      />
    </View>
  );
};

方案2：从编辑页返回时传递更新后的数据

在编辑页保存完成后，将更新后的资料数据作为参数传递回Account页面，在Profile组件中监听参数变化并更新状态：

编辑页的保存逻辑：

const handleSave = async () => {
  // 先执行保存操作（比如调用API）
  await saveEditedProfile(editedData);
  
  // 返回Account时传递更新后的数据
  navigation.navigate('Account', { updatedProfile: editedData });
};

Profile组件中监听参数：

const Profile = ({ route, navigation }) => {
  const [profileData, setProfileData] = useState({});

  useEffect(() => {
    // 初始化加载数据
    fetchLatestProfile();
    
    // 如果有传递更新后的资料，直接更新状态
    if (route.params?.updatedProfile) {
      setProfileData(route.params.updatedProfile);
      // 清除参数，避免下次进入页面重复触发
      navigation.setParams({ updatedProfile: undefined });
    }
  }, [route.params]);

  // ...其余渲染逻辑
};

说明 #

方案1的优势在于不管是从其他标签切换回来，还是从编辑页返回，只要Account标签获得焦点就会刷新数据，覆盖所有需要更新资料的场景；方案2更适合不需要重新请求API，直接复用编辑页已修改数据的场景。

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