用Swift创建ReactNative模块

最新推荐文章于 2024-07-14 00:30:00 发布

原创最新推荐文章于 2024-07-14 00:30:00 发布 · 409 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#swift #javascript #移动开发 #ViewUI

Javascript 同时被 3 个专栏收录

10 篇文章

订阅专栏

React-Native

2 篇文章

订阅专栏

IOS

1 篇文章

订阅专栏

本文介绍了如何使用Swift创建React Native模块。从打开Xcode工程，创建Swift类，设置Bridging Header，到编写Swift和Objective-C代码实现模块暴露，最后在React Native中引用并调用Swift方法，实现两端交互。

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