常见的 React Native 错误类型

JavaScript 错误
JavaScript 错误通常由语法错误、未定义的变量或类型错误引起。使用 Chrome DevTools 或 React Native Debugger 可以捕获这些错误。

原生模块错误
原生模块错误发生在与 iOS/Android 原生代码交互时，可能由错误的桥接配置或原生代码逻辑问题导致。检查 Xcode 或 Android Studio 的日志以获取详细信息。

网络请求错误
网络请求错误通常由 API 调用失败、CORS 问题或超时引起。使用 try-catch 或 .catch() 处理异步请求错误，并记录响应状态码和错误信息。

样式错误
样式错误可能由无效的样式属性或单位导致。React Native 的样式与 Web CSS 不同，需确保使用支持的属性（如 flex 而非 display: flex）。

错误捕获与日志记录

全局错误处理
使用 ErrorUtils.setGlobalHandler 捕获未处理的异常：

ErrorUtils.setGlobalHandler((error, isFatal) => {
  console.log('Global Error:', error, 'Fatal:', isFatal);
});

日志集成
集成 Sentry 或 BugSnag 等工具实现错误监控：

import * as Sentry from '@sentry/react-native';
Sentry.init({ dsn: 'YOUR_DSN' });

调试工具与方法

React Native Debugger
独立工具，支持 Redux 调试和网络请求检查。通过 react-devtools 单独安装以检查组件树。

Android/iOS 原生日志

• Android: 运行 adb logcat 查看设备日志。
• iOS: 使用 Xcode 的 Console 或命令行 xcrun simctl spawn booted log。

热重载与快速刷新
通过 npm start -- --reset-cache 清除 Metro 缓存解决部分缓存导致的错误。

性能相关错误处理

内存泄漏
使用 WeakRef 或清理定时器、订阅来避免：

useEffect(() => {
  const subscription = Emitter.addListener('event', callback);
  return () => subscription.remove(); // 清理
}, []);

长列表优化
使用 FlatList 的 windowSize 和 initialNumToRender 属性减少渲染压力：

<FlatList
  windowSize={5}
  initialNumToRender={10}
/>

生产环境错误管理

错误边界（Error Boundaries）
使用 React 的 Error Boundary 捕获组件树错误：

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    logToService(error, info);
  }
}

禁用 YellowBox 警告
在 App.js 中屏蔽非关键警告：

console.disableYellowBox = true;
// 或针对特定警告
console.ignoredYellowBox = ['Warning: ...'];

依赖与版本冲突解决

版本锁定
使用 yarn.lock 或 package-lock.json 确保依赖一致性。通过 npm outdated 检查过时依赖。

原生依赖链接
手动链接原生模块时，确保 Gradle 和 CocoaPods 配置同步：

react-native link <package-name>
# 或手动检查 `settings.gradle` 和 `Podfile`

Hermes 引擎问题
启用 Hermes 后若出现 JS 错误，检查 android/app/build.gradle 配置：

project.ext.react = [
  enableHermes: true
]