React Native 0.70.3 iOS模拟器报错求助:TypeError读取source属性失败
解决React Native 0.70.3 iOS模拟器"Cannot read property 'source' of undefined"报错
升级React Native到0.70.3后,iOS模拟器运行项目时触发报错:
TypeError: Cannot read property 'source' of undefined, js engine: hermes
项目package.json配置如下:
{"name": "juzappnoexpo","version": "0.0.1","private": true,"scripts": {"postinstall": "patch-package","android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint ."},"dependencies": {"@react-native-async-storage/async-storage": "^1.15.8","@react-native-community/cameraroll": "^4.0.4","@react-native-community/checkbox": "^0.5.12","@react-native-community/push-notification-ios": "^1.10.1","@react-native-community/slider": "^4.1.7","@react-native-google-signin/google-signin": "^7.0.0-alpha.3","@react-navigation/bottom-tabs": "^6.0.9","@react-navigation/native": "^6.0.6","@react-navigation/stack": "^6.0.11","@rneui/base": "^4.0.0-rc.6","@rneui/themed": "^4.0.0-rc.6","axios": "^0.21.1","deprecated-react-native-prop-types": "^2.3.0","fbjs": "^3.0.0","immer": "^9.0.1","lodash.remove": "^4.7.0","moment": "^2.29.1","patch-package": "^6.4.7","react": "18.1.0","react-native": "0.70.3","react-native-aes-crypto": "^1.3.10","react-native-audio-recorder-player": "^3.5.1","react-native-camera": "git+https://git@github.com/react-native-community/react-native-camera.git","react-native-contacts": "^7.0.2","react-native-draggable": "^3.3.0","react-native-event-source": "^1.1.0","react-native-fast-image": "^8.3.7","react-native-form-component": "^2.4.0","react-native-fs": "^2.18.0","react-native-gesture-handler": "^1.10.0","react-native-image-filter-kit": "^0.8.0","react-native-image-picker": "^4.1.1","react-native-image-viewing": "^0.2.1","react-native-incall-manager": "^3.3.0","react-native-keychain": "^6.2.0","react-native-loading-spinner-overlay": "^2.0.0","react-native-logs": "^3.0.4","react-native-paper": "^4.9.2","react-native-photo-editor": "^1.0.12","react-native-popup-menu": "^0.15.13","react-native-push-notification": "^8.1.0","react-native-remix-icon": "^0.3.0","react-native-rsa-native": "^2.0.3","react-native-safe-area-context": "^3.1.9","react-native-screens": "^3.8.0","react-native-svg": "^12.1.0","react-native-user-avatar": "^1.0.7","react-native-vector-icons": "^8.0.0","react-native-video": "^5.2.1","react-native-walkthrough-tooltip": "^1.4.0","react-native-webrtc": "^1.100.1","react-redux": "^7.2.2","react-use-elmish": "^1.0.0","redux": "^4.0.5","redux-persist": "^6.0.0","redux-saga": "^1.1.3","rn-checkbox-list": "^1.1.0","rn-fetch-blob": "^0.12.0","rn-sliding-up-panel": "^2.4.5","rxjs": "^6.6.3","ts-assert-unreachable": "^0.0.9"},"devDependencies": {"@babel/core": "^7.8.4","@babel/runtime": "^7.8.4","@react-native-community/eslint-config": "^1.1.0","@simbathesailor/use-what-changed": "^2.0.0","@types/jest": "^26.0.20","@types/react": "^17.0.1","@types/react-native": "^0.63.48","@types/react-native-event-source": "^1.1.0","@types/react-native-incall-manager": "^3.2.1","@types/react-native-loading-spinner-overlay": "^0.5.3","@types/react-native-push-notification": "^7.3.3","@types/react-native-video": "^5.0.8","@types/react-native-webrtc": "^1.75.4","@types/react-redux": "^7.1.16","@types/react-test-renderer": "^17.0.0","@welldone-software/why-did-you-render": "^6.2.1","babel-jest": "^25.1.0","eslint": "^6.5.1","jest": "^25.1.0","metro-react-native-babel-preset": "^0.59.0","react-native-codegen": "^0.0.8","react-test-renderer": "16.13.1","redux-devtools-extension": "^2.13.9","redux-immutable-state-invariant": "^2.1.0","remote-redux-devtools": "^0.5.16","typescript": "^4.1.3"},"jest": {"preset": "react-native"}}
报错截图:
排查与解决步骤
- 定位报错来源:打开React Native Debugger或Chrome调试工具,查看完整调用栈,确认触发
source读取操作的组件或第三方库。这类报错大概率是依赖库未适配RN 0.70的API变更。 - 升级兼容的第三方库:
react-native-camera已不再适配RN 0.70+,替换为官方推荐的react-native-vision-camera;- 将
react-native-gesture-handler升级到2.0.0+版本,react-native-image-picker升级到5.0.0+版本,确保依赖库支持RN 0.70; - 检查
react-native-fast-image、react-native-webrtc等库的版本,升级到对应兼容版本。
- 清理缓存并重建项目:
- 执行
npm cache clean --force清除npm缓存; - 进入iOS目录,删除
Podfile.lock和Pods文件夹,重新执行pod install; - 重置模拟器缓存:打开模拟器后选择
Hardware > Erase All Content and Settings; - 重启Metro服务:执行
react-native start --reset-cache。
- 执行
- 检查Hermes兼容性:RN 0.70默认启用Hermes,部分旧库可能不兼容。可临时修改iOS项目
Podfile,将use_react_native!中的:hermes_enabled => true改为false,若报错消失,需替换或升级不兼容的库。 - 修复代码中的空值引用:排查项目代码中是否存在直接读取
undefined对象的source属性的情况,添加空值判断(如obj?.source)避免报错。
内容的提问来源于stack exchange,提问作者javapedia.net
相关产品推荐
相关产品推荐

