用Swift创建ReactNative模块

1、打开react-native项目中ios文件夹下得xcode工程文件。

2、在AppDelegate.m的平级创建需要暴露给ReactNative的Swift类

 

将其命名为“MyModule”

 

创建完后，会提示你是否创建Bridging Header，因为IOS开发如果需要swift和oc共存，则Swift必须提供一个Bridging Header 给oc，否则oc无法调用Swift。目前Swift无法直接暴露给ReactNative，所以需要oc来做桥接。

 

3、在刚创建的Bridging Header文件中添加一行代码，这是React Bridge的头文件

 

#import "RCTBridgeModule.h"

 

4、编写我们的主类文件，也就是刚才创建的MyModule.swift

import Foundation
//加上@objc是为了让swift和被oc所调用
@objc(MyModule)
class MyModule: NSObject {
  @objcfunc sayHi(msg:String!, callback: RCTResponseSenderBlock) -> Void {
    callback(["Swift Module recieved your message, content is \"\(msg)\""]);
  }
}

 

5、还需要最后一步骤，将我们的模块方法通过ReactNative暴露出去，这步还是在oc的实现文件中去做，新建一个MyModule.m文件。

 

代码内容如下：

// MyModule.m
#import "RCTBridgeModule.h"
@interfaceRCT_EXTERN_MODULE(MyModule, NSObject)
RCT_EXTERN_METHOD(sayHi:(NSString)msg callback:(RCTResponseSenderBlock)callback)
@end

 

5、到此就完成了一个Swift ReactNative模块的开发，在XCode中运行下(Command + R)，完成模块的编译后，就可以去ReactNative中去引用这个模块。

6、Native 语言暴露给ReactNative的模块、方法都在NativeModules这个模块上，所以我们新建一个js模块

import React, {
  NativeModules
} from 'react-native';
export default NativeModules.MyModule;

 

7、在业务代码中应用这个模块，并调用swift方法

import MyModule  from './MyModule';

MyModule.sayHi("Hi, I am from JS” , (msg)=>{
  console.log(msg);
});)

 最终会在浏览器的控制台中输出: Swift Module recieved your message, content is "I am from JS