在使用 React Native 的 IOS 运行时出现“未处理的 JS 异常：本机模块不能为空”错误

Posted 2023-03-15

【中文标题】在使用 React Native 的 IOS 运行时出现“未处理的 JS 异常：本机模块不能为空”错误

【英文标题】：Getting "Unhandled JS Exception: Native module cannot be null" Error on IOS runtime with React Native

【发布时间】：2020-04-26 15:41:57

【问题描述】：

准备中型生产级应用 ios。

应用程序使用了许多本机功能和一些尝试点 为了整合其中的一些，我转而使用Cocoapods。 手动使用Podfile 文件。

这帮助我克服了所有构建失败的问题，最终可以让 RN 应用程序运行。

只是现在，得到一个非常模糊的错误：

Unhandled JS Exception: Native module cannot be null

很难弄清楚是哪个第 3 方软件包导致了这种情况。 一堆git 问题指向将正确的包添加到Podfile 文件 和pod install 我做到了，但仍然不快乐。

这些是 `git 问题，大部分都在一个特定的包中：

SO answers for 'react-native-push-notification' Git issue in 'react-native-tab-view' Git issue in 'react-native-push-notification' Git issue in ' react-native-vector-icons' Git issue solution

其中大多数几乎都是通过将正确的 pod 链接添加到 Podfile 文件并运行 pod install 来解决这个问题 - 这对我不起作用

我尝试过的事情：

删除二进制链接，但 javascriptCore.framework 和 libPods-myProjectName.a 从所有 .xcodeproj 包中清除 Libraries 以解决重复链接问题 清理项目重建，清理带有pod deintegrate 的包并重新安装.. 基本上清理并重新安装了我能做的一切 将react-native从0.58.6升级到0.59.9

关注this blog post 将我现有的项目转换为使用Cocoapods`

Pod 安装似乎没有任何错误通过 - pod install 输出：

Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
Downloading dependencies
Installing AppAuth (1.3.0)
Installing BugsnagReactNative (2.23.1)
Installing DoubleConversion (1.1.6)
Installing Folly (2018.10.22.00)
Installing RNDeviceInfo (2.3.2)
Installing RNGestureHandler (1.1.0)
Installing RNSVG (9.5.1)
Installing RNShare (3.0.0)
Installing RNSound (0.11.0)
Installing RNVectorIcons (6.6.0)
Installing React (0.59.9)
Installing ReactNativePermissions (1.1.1)
Installing boost-for-react-native (1.63.0)
Installing glog (0.3.5)
Installing react-native-camera (2.1.1)
Installing react-native-image-picker (0.28.1)
Installing react-native-image-resizer (1.2.0)
Installing react-native-keep-awake (4.0.0)
Installing react-native-netinfo (3.2.1)
Installing react-native-orientation (3.1.3)
Installing react-native-view-shot (3.1.2)
Installing react-native-webview (5.7.0)
Installing yoga (0.59.9.React)
Installing ReactNativeNFC (1.0.0)
Generating Pods project
Integrating client project
Pod installation complete! There are 31 dependencies from the Podfile and 23 total pods installed.

还有Podfile：

source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '9.0'

target 'myProjectName' do
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTText',
    'RCTImage',
    'RCTNetwork',
    'RCTWebSocket',
    'RCTSettings',
    'RCTAnimation',
    'RCTLinkingIOS',
    # Add any other subspecs you want to use in your project
    # Remove any subspecs you don't want to use in your project
  ]

  pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
  pod 'react-native-webview', :path => '../node_modules/react-native-webview'
  pod 'RNSound', :path => '../node_modules/react-native-sound'
  pod 'react-native-camera', :path => '../node_modules/react-native-camera'
  pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'
  pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
  pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'
  pod 'react-native-image-resizer', :path => '../node_modules/react-native-image-resizer'
  pod 'react-native-keep-awake', :path => '../node_modules/react-native-keep-awake'
  pod 'react-native-orientation', :path => '../node_modules/react-native-orientation'

  # permissions_path = '../node_modules/react-native-permissions/ios'
  # pod 'Permission-Camera', :path => "#permissions_path/Camera.podspec"

  pod 'ReactNativePermissions', :path => '../node_modules/react-native-permissions'
  pod 'RNShare', :path => '../node_modules/react-native-share'
  pod 'RNSVG', :path => '../node_modules/react-native-svg'
  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
  pod 'react-native-view-shot', :path => '../node_modules/react-native-view-shot'
  pod 'AppAuth'
  pod 'BugsnagReactNative', :path => '../node_modules/bugsnag-react-native'
  pod 'react-native-netinfo', :path => '../node_modules/@react-native-community/netinfo'
  pod 'ReactNativeNFC', :path => '../node_modules/react-native-rfid-nfc-scanner/ios'

end

还有我的dependancies 里面的package.json：

  "dependencies": 
    "@react-native-community/netinfo": "3.2.1",
    "axios": "0.18.0",
    "bugsnag-react-native": "2.23.1",
    "country-list": "2.1.1",
    "formik": "1.5.1",
    "link": "^0.1.5",
    "moment": "2.24.0",
    "react": "16.6.3",
    "react-native": "0.59.9",
    "react-native-android-location-enabler": "^1.1.0",
    "react-native-android-wifi": "0.0.41",
    "react-native-app-auth": "^4.4.0",
    "react-native-camera": "2.1.1",
    "react-native-collapsible": "1.4.0",
    "react-native-country-picker-modal": "0.7.1",
    "react-native-device-info": "2.3.2",
    "react-native-fs": "^2.16.4",
    "react-native-gesture-handler": "1.1.0",
    "react-native-image-picker": "0.28.1",
    "react-native-image-resizer": "^1.2.0",
    "react-native-keep-awake": "^4.0.0",
    "react-native-linear-gradient": "2.5.4",
    "react-native-orientation": "3.1.3",
    "react-native-permissions": "1.1.1",
    "react-native-pinch-zoom-responder": "^0.1.2",
    "react-native-qrcode-scanner": "1.1.2",
    "react-native-rfid-nfc-scanner": "github:avshalomp/react-native-rfid-nfc#fix/nfc_infrastructure",
    "react-native-share": "^3.0.0",
    "react-native-smooth-pincode-input": "1.0.3",
    "react-native-sound": "^0.11.0",
    "react-native-status-bar-height": "2.3.1",
    "react-native-svg": "9.5.1",
    "react-native-svg-charts": "5.2.0",
    "react-native-swipe-gestures": "1.0.3",
    "react-native-swiper": "^1.5.14",
    "react-native-vector-icons": "6.6.0",
    "react-native-view-shot": "^3.1.2",
    "react-native-webview": "^5.7.0",
    "react-native-wifi": "1.0.1",
    "react-navigation": "3.3.2",
    "react-navigation-transitions": "1.0.10",
    "react-redux": "6.0.1",
    "redux": "4.0.1",
    "redux-persist": "5.10.0",
    "redux-saga": "1.0.2",
    "reselect": "4.0.0",
    "styled-components": "4.1.3",
    "yup": "0.26.10"
  

我目前的环境：

   React: 16.6.3,
   React Native: 0.59.9 // tested with React Native 0.58.6 too
   Xcode: 11.4.1

真的很难调试这个，因为 React Native 错误不是很有帮助，而且可能遗漏了一些东西

任何想法如何获得关于这个的更多信息？

或者如何解决？

帮助..

【问题讨论】：

当您说 Profile 时，您是指 Podfile？要安装 pod，您需要一个 Podfile。

是的，对不起。上传的时候有点着急，而且对于 IOS 原生的东西还是有点新 - 编辑了它

没问题！安装后显示哪个消息 pod install？

对于 cmets 来说太长了我已将 pod install 的所有输出添加到主帖

我添加了一个答案来跟踪要安装的新丢失的软件包。让我们尝试安装每一个。

【参考方案1】：

在你的 Podfile 中添加这个：

pod 'ReactNativeNFC', :path => "../node_modules/react-native-rfid-nfc/ios"

然后：

pod install

如果我发现新的未安装组件，我会在此处添加。

【讨论】：

谢谢，我刚刚添加它并安装仍然相同的错误。顺便说一句，.podspec 文件位于ios 文件夹内，因此路径为"../node_modules/react-native-rfid-nfc/ios"

你是对的。我编辑了答案。那么，您是否将 react-native-wifi 添加到 Podfile 中？我看不到。

在代码中对其进行了测试，但现在在这里更新并添加了整个Podfile .. 它真的开始成为一个内容过多的帖子：/

是的，我只是想给你一个方向。现在，我认为经过几分钟的调查，您可以找到要在 Podfile 上插入的缺失依赖项。 =)

谢谢，虽然我一个一个去了..添加的所有内容仍然相同..我确定它的东西超级小而且很愚蠢，我错过了..感谢您的耐心-非常感谢:)