TypeScript+Expo项目出现Require Cycle及Network Error报错如何解决？

你遇到的循环路径为components/FeedBlock/index.tsx -> screens/Profile.tsx -> components/FeedBlock/index.tsx，可通过以下三种方案修复：

• 抽离公共依赖：将两个文件共同引用的类型、常量、工具函数抽离到单独的公共文件（如types/feed.ts、utils/feed.ts），两个业务文件统一从公共文件导入依赖，消除互相引用
• 优化导入方式：如果循环由TS类型导入导致，将普通导入改为仅类型导入import type { ProfileProps } from '../screens/Profile'，该类导入编译后会被移除，不会产生运行时依赖；如果是运行时组件引用导致的循环，在使用率较低的一侧使用动态导入，比如在FeedBlock中引入Profile时使用const Profile = React.lazy(() => import('../screens/Profile'))
• 调整组件逻辑：将交叉依赖的逻辑提升到上层父组件（如你提到的Home.tsx、App.tsx），比如FeedBlock需要跳转Profile的场景，不要在FeedBlock内部直接导入Profile组件，而是通过props传递跳转回调，由父组件处理跳转逻辑，直接打破循环

相关报错截图：

该报错本质是异步请求抛出错误后没有对应的捕获逻辑，可按以下步骤处理：

• 给所有异步请求补充错误捕获：使用.then().catch()链式调用的请求必须补充catch分支，async/await写法的请求必须用try {} catch (err) {}包裹，所有网络错误优先在请求发起侧处理
• 增加全局兜底捕获：在App.tsx入口文件增加全局未处理Promise错误捕获逻辑，避免闪退：

import { Alert } from 'react-native';

if (typeof Promise !== 'undefined') {
  const originalCatch = Promise.prototype.catch;
  Promise.prototype.catch = function (onRejected) {
    return originalCatch.call(this, onRejected || ((err) => {
      console.error('全局捕获未处理请求错误：', err);
      if (__DEV__) Alert.alert('请求错误', err.message);
      // 生产环境可在此处添加错误埋点上报逻辑
    }));
  };
}

• 排查网络请求本身异常：如果是Expo开发环境，检查模拟器网络连接是否正常；如果请求地址为本地后端服务，安卓模拟器需要将localhost替换为10.0.2.2才能访问电脑本地服务，同时检查后端服务状态、跨域配置、请求头是否符合要求。

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