Swift桥接标头未导出React Native类型

Question

我正在尝试使用Swift为React native应用程序创建一个本地(iOS)模块。我想在模块上公开一个返回promise的方法，使用类型为RCTPromiseResolveBlock和RCTPromiseRejectBlock的函数，这两个函数都在React Native的RCTBridgeModule.h标头中声明。然而，我的构建失败了，这两种类型都显示消息"使用未声明的类型…"。

我已经为另一个目的创建了一个桥接头(自动使用Xcode)，所以我相信导入React/RCTBridgeModule.h就是我提供上述类型所需要的全部。大概我误解了什么，因为这并不能解决问题。我试着建立一个新的项目，那里的一切都如预期的那样，但我似乎找不到会导致我的项目构建失败的区别。

一些相关配置细节：

• 名为<ProjectName>-Bridging-Header.h的桥接标头，存储在我的源目录中。我移动了它，以确认Xcode找到了它(当它不在正确的位置时，构建会以不同的方式失败)
• 桥接标头的内容很简单：#import <React/RCTBridgeModule.h>
• 在我的项目生成设置中：
  • <ProjectName>-Bridging-Header.h配置为"Objective-C桥接头">
  • "Install Objective-C Compatibility Header"设置为"Yes">
  • "预编译桥接标头"设置为"是">
• 当我键入alias缺少的类型时，项目将按预期构建和运行
• 我安装了一些第三方Swift库(一个使用react-native link，另一个使用Git子模块)
• 我尝试过清理构建文件夹、重新安装node_modules和删除Xcode派生的数据，但都没有效果

是我的项目配置错误，还是我错过了重要的东西？

Answer 1

本教程非常善于解释如何使用Swift设置本机模块。它把每件事都分解成步骤，而且很容易遵循。

https://teabreak.e-spres-oh.com/swift-in-react-native-the-ultimate-guide-part-1-modules-9bb8d054db03

1. 设置
2. 如何将Swift类公开给JS
3. 如何公开静态Swift数据
4. 如何公开Swift方法
5. 如何使用回调公开方法
6. 如何将方法公开为Promise
7. 如何公开事件发射器
8. 如何提取React Native模块

很明显，这是你想要做的第6步。

下面是一个代码示例。这与上面链接中所做的非常相似。你的桥接头应该是这样的：

// <ProjectName>-Bridging-Header.h
#import "React/RCTBridgeModule.h"
#import "React/RCTEventEmitter.h"

---

您应该有名为ModuleName.m和ModuleName.swift的文件。

// ModuleName.m
#import "React/RCTBridgeModule.h"
#import "React/RCTEventEmitter.h"
@interface RCT_EXTERN_MODULE(ModuleName, NSObject)
// this is how we expose the promise to the javascript side.
RCT_EXTERN_METHOD(functionWithPromise: (RCTPromiseResolveBlock)resolve rejecter: (RCTPromiseRejectBlock)reject)
@end

---

// ModuleName.swift
@objc(ModuleName)
class ModuleName: NSObject {
@objc
func constantsToExport() -> [AnyHashable : Any]! {
return ["projectName": "ModuleName"]
}
@objc
static func requiresMainQueueSetup() -> Bool {
return true
}
@objc
func functionWithPromise(
_ resolve: RCTPromiseResolveBlock,
rejecter reject: RCTPromiseRejectBlock
) -> Void {
if (//something bad happens) {
let error = NSError(domain: "", code: 200, userInfo: nil)
reject("ERROR_FOUND", "failure", error)
} else {
resolve("success")
}
}
}

---

然后在Javascript端，您可以这样访问它：

import { NativeModules } from 'react-native'
NativeModules.Counter.functionWithPromise()
.then(res => console.log(res))
.catch(e => console.log(e.message, e.code))