React Navigation TabNavigator上传图片时自动跳转至默认路由问题

这种情况我之前做React Native项目时也踩过坑！结合你描述的现象和代码，大概率是未捕获的Promise异常或者FormData请求的配置问题导致的，下面给你一步步排查和解决的方案：

一、先给fetch请求补上错误捕获 #

你的代码里没有catch块，如果上传过程中出现网络故障、服务器返回非200状态码这类问题，Promise会抛出未捕获的全局异常——这种异常很可能会干扰React Navigation的路由状态，导致意外跳转到默认路由。先把错误捕获加上试试：

uploadImage(fileToBeUploaded, imagePath) {
  let data = new FormData();
  data.append("userId", this.props.userData._id);
  data.append("file", fileToBeUploaded);
  
  fetch(Metrics.serverUrl + "users/updateUserInformation", {
    method: "post",
    headers: {
      'Authorization': "Bearer " + this.props.token,
      // 划重点：FormData请求不需要手动设置Content-Type，浏览器/React Native会自动添加带boundary的正确头
      // 手动加反而会丢失boundary，导致请求失败进而触发异常
    },
    body: data
  })
  .then(response => {
    // 先检查响应状态，非200直接抛出错误
    if (!response.ok) {
      throw new Error(`服务器返回错误：${response.status}`);
    }
    return response.json();
  })
  .then(responseJson => {
    if (responseJson.status) {
      console.log("上传成功:", responseJson);
      return;
    }
    console.warn("更新失败:", responseJson);
  })
  .catch(error => {
    console.error("上传出错:", error);
    // 这里可以加个Toast或者弹窗提示用户上传失败
  });
}

二、检查TabNavigator的路由配置 #

如果加了catch块还是跳转，那要看看TabNavigator有没有设置会卸载失焦页面的配置。比如React Navigation 5+版本里的unmountOnBlur: true，如果开启这个属性，Profile页面失焦时会被卸载，上传过程中页面卸载可能会触发路由跳转：

// 不要设置unmountOnBlur为true，或者直接去掉这个配置
<Tab.Navigator
  screenOptions={{ 
    // unmountOnBlur: true  // 把这行注释掉或者设为false
  }}
>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>

三、验证FormData的文件格式是否正确 #

确保你传入的fileToBeUploaded是符合FormData要求的格式，比如在React Native中用ImagePicker获取图片后，需要把图片信息转换成包含uri、type、name的对象：

// 假设从ImagePicker拿到的图片数据是imageResult
const fileToBeUploaded = {
  uri: imageResult.uri,
  type: imageResult.type || 'image/jpeg',
  name: imageResult.fileName || 'avatar.jpg',
};

四、监听路由变化排查触发源 #

如果上面的方法都没用，可以在Profile页面添加路由监听，看看是什么触发了页面失焦跳转：

componentDidMount() {
  this.routeListener = this.props.navigation.addListener('blur', () => {
    console.log("Profile页面失焦了！");
    // 打印调用栈，直接定位跳转的触发源头
    console.trace();
  });
}

componentWillUnmount() {
  this.routeListener(); // 移除监听
}

通过调用栈你能清楚看到是哪个操作触发了路由跳转，方便进一步定位问题。

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