React-Native 踩坑 | wdkang 的博客

type

status

date

slug

summary

细数 React Native 的坑

React Native 是一个强大的跨平台开发框架，但也因为其复杂性和双平台支持，存在不少让开发者“抓狂”的坑。本文参考社区经验，结合亲身踩坑经历，整理出一份实用的避坑指南，希望对你有所帮助。

1. 环境配置坑

❌ Android 模拟器跑不起来 / 报错

没有正确配置 ANDROID_HOME

没有安装合适的 SDK Platform 和系统镜像

使用 M1/M2 芯片时部分模拟器不兼容

✅ 建议：

用命令行 npx react-native doctor 检查依赖

尽量使用真实设备调试，尤其是 Android

❌ iOS 构建失败 / 缺少依赖

缺少 pod 安装

Rosetta 模拟不生效

✅ 建议：

2. 第三方库兼容坑

❌ react-native-reanimated 错误

需要修改 babel 配置

开启 Hermes 时要注意兼容性

✅ 解决方案：

添加 babel 插件 plugin: 'react-native-reanimated/plugin'

重启 Metro bundler 清缓存：npx react-native start --reset-cache

❌ react-native-gesture-handler 无响应

未正确设置入口文件

✅ 解决方案：

将 App.js 顶部包裹为：

3. 样式布局坑

❌ 样式无效或奇怪

忘记使用 Flexbox 语法

单位写了 px（React Native 不支持）

✅ 建议：

使用 StyleSheet.create

避免嵌套过多的 View，保持结构简洁

❌ SafeAreaView 无效

安卓上没有效果（只对 iOS 起作用）

✅ 解决方案：使用 react-native-safe-area-context 统一处理

4. 性能与调试坑

❌ FlatList 卡顿或白屏

未设置 keyExtractor

未使用 initialNumToRender 等优化参数

✅ 建议：

❌ setState 更新 UI 不刷新

多为异步请求后状态未正确更新

✅ 建议：使用 useEffect + useState 搭配确保更新同步

5. 打包发布坑

❌ Android 打包失败

JDK 版本不兼容

未配置签名文件

✅ 建议：

使用 JDK 11

检查 android/gradle.properties 和 release.keystore

❌ iOS 上传 App Store 被拒

使用了不兼容的库（如 App Tracking 没处理）

✅ 建议：

配置正确的 Info.plist

使用 Xcode 检查依赖项

6. 网络请求 / 权限相关坑

❌ Android 无法请求网络

忘记添加网络权限

✅ 解决方案：

在 AndroidManifest.xml 添加：

❌ fetch 请求失败

iOS 需设置 ATS（App Transport Security）策略

✅ 解决方案：修改 Info.plist

7. 热更新与缓存坑

❌ 修改代码不生效

Metro 缓存未清除

没有使用热重载

✅ 建议：