react-native-ssl-pinning调用fetch报Cannot read properties of undefined错误如何解决

1. 修正导入语法 #

你当前遇到的报错最常见的原因是导入方式错误，react-native-ssl-pinning的fetch方法为默认导出，而非命名导出，请将导入代码修改为：

import fetch from 'react-native-ssl-pinning';

修改后重新编译项目，多数情况下可直接解决该报错。

2. 确认原生依赖配置完成 #

该库包含原生代码，仅执行npm/yarn安装依赖无法正常使用，需完成对应平台的原生配置：

Android端 #

• 将你的DER编码格式的.cer证书文件存放到android/app/src/main/assets目录下，注意你在sslPinning配置中填写的证书名mycert必须和证书文件名mycert.cer完全匹配，配置项不需要带后缀
• RN 0.60以下版本还需额外完成如下配置：
  • 在android/settings.gradle中添加模块引入：

  include ':react-native-ssl-pinning'
  project(':react-native-ssl-pinning').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-ssl-pinning/android')
  

  • 在android/app/build.gradle的dependencies块添加依赖：

  implementation project(':react-native-ssl-pinning')
  

  • 在MainApplication.java中注册原生模块：

  import com.toyberman.RNSslPinningPackage;
  // 在getPackages方法返回的列表中添加 new RNSslPinningPackage()
  

iOS端 #

• 用Xcode打开iOS项目，将证书文件拖入项目根目录，勾选「Copy items if needed」和对应的应用target
• 执行cd ios && pod install完成原生依赖安装
• 确认证书已被添加到项目Build Phases的「Copy Bundle Resources」列表中

3. 其他排查操作 #

如果以上操作完成后仍报错，可尝试清理缓存后重新编译：

npx react-native start --reset-cache

之后重新启动应用即可。

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