上篇文章主要讲了如何在 Native 应用中添加 React Native 界面(模块), 在这篇文章中看看在 React Native 应用中如何添加 Native 界面(模块)

在进入正题之前, 需要说明的是这两篇文章中使用的 iOS 项目都是 Swift 开发的.

默认我们通过 react-native init ProjectName 创建项目时, 里面 iOS 相关的模块都是 Objective-C 的, 好像不能直接创建 Swift 项目, 所以我们需要手动创建 Swift 项目.
在上一篇文章中, 我们详细讲诉了如何通过 CocoaPods 配置 React Native 依赖. 下面是 Swift 项目和 Objective-C 项目中通过不同的方式配置的 React Native 的依赖.

为了能直接通过 react-native run-ios 运行项目, 我们需要修改 iOS 项目的根目录名称为 ios , 否则它找不到项目中的入口 RNHybridiOS.xcodeproj
在项目内部的Appdelegate.Swift 文件中, 我们需要设置 RCTRootView 容器所包裹的 React Native 组件, 命名指定 NativeDemo_Swift , 这个名字与 index.js 中注册的组件的名称保持一致.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        
        if let jsCodeLocation = RCTBundleURLProvider.sharedSettings()?.jsBundleURL(forBundleRoot: "index", fallbackResource: nil) {
            
            let rootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: "NativeDemo_Swift", initialProperties: nil, launchOptions: launchOptions)
            
            window = UIWindow(frame: UIScreen.main.bounds)
            
            let rootVC = UIViewController()
            rootVC.view = rootView
            window?.rootViewController = rootVC
            window?.makeKeyAndVisible()
        }
        
        return true
    }

在开发阶段我们从本地服务器加载 js 代码, 在发布阶段是通过打包好的 js bundle , 在项目中直接加载.
在项目根目录, 执行 react-native run-ios 运行项目, 如果终端显示变异成功, 但是本地服务器 (Packager) 无法自动开启, 我们需要手动开启 Packager, 执行 npm start.

进入正题.

在 React Native 应用中添加 Native 界面(模块)

Native 模块本身包含的内容非常多. 比如添加地图功能, 照相机/相册, 第三方分享等等. 这里我们不涉及到具体的业务, 只是最基本的使用.

1. 使用 RCTBridgeModule 导出 Native 中的类和方法

如果要在 React Native 中使用 Native 模块,

对于 Objective-C 类, 需要实现 RCTBridgeModule 协议, 这个协议里定义了宏(RCT_EXPORT_METHOD, RCT_EXPORT_MODULE), 用来导出 iOS 中的方法, 类等. 以供 React Native 使用.
对于 Swift 类, 由于不能直接使用包含方法的宏, 所以我们需要通过下面这种方式来创建.

在 AlbumManager.swift 中

// 使用 @objc 标记来确保类和函数对 Objective-C 公开
@objc(AlbumManager)
class AlbumManager: NSObject {

    @objc(addEvent:date:detailInfo:callBack:)
    func addEvent(name: String, date: NSDate, detailInfo: [String:Any], callBack: RCTResponseSenderBlock){
    ...    
  }
}

创建一个 AlbumManagerBridge.m 文件, 在内部导出 module 和 method.

#import <Foundation/Foundation.h>

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(AlbumManager, NSObject)

RCT_EXTERN_METHOD(addEvent:(NSString *)name date:(NSDate *)date detailInfo: (NSDictionary *)detailInfo callBack: (RCTResponseSenderBlock *)callBack)

@end

由于使用了 .m 文件, 为了与 Swift 通信, 我们需要进行桥接. 在桥接文件中导入 RCTBridgeModule.h.

#import <React/RCTBridgeModule.h>

2. RCT_EXPORT_METHOD 的使用

RCT_EXPORT_METHOD 中的参数支持所有标准 JSON 类型, 包括:

string (NSString)
number (NSInteger, float, double, CGFloat, NSNumber)
boolean (BOOL, NSNumber)
array (NSArray) 可包含本列表中任意类型
object (NSDictionary) 可包含 string 类型的键和本列表中任意类型的值
function (RCTResponseSenderBlock)

Swift 与 Objective - C 对应.

// 使用 @objc 标记来确保类和函数对 Objective-C 公开
@objc(addEvent:date:detailInfo:callBack:)
func addEvent(name: String, date: NSDate, detailInfo: [String:Any], callBack: RCTResponseSenderBlock){
    
    RNToolManager.lc_logInfo(date as! NSObject)
    RNToolManager.lc_logInfo(detailInfo as! NSObject)
    
    // 官方提供的转换方法
    let age = RCTConvert.int(detailInfo["age"])
    // 或者直接强转
    let age2 = detailInfo["age"] as! Int
    
    // 返回给 JavaScript
    let events = ["jack"]
    callBack([events])
}

对应与 JavaScript 端, 在 iOS 中导出的原生 method 需要通过 react-native 中的 NativeModules 进行使用.

import { NativeModules } from 'react-native';
const AlbumManager = NativeModules.AlbumManager

testAlbum() {
    AlbumManager.addEvent(
      "lucy",   // 传递 string
      this.date.getTime(),  // 传递 时间戳
      {age: 18},  // 床底字典
      (events)=>{  // block 回调
        if (events) {
          console.log('====================================');
          console.log("events", events);
          console.log('====================================');
        } 
      }
    )
  }

有几点需要注意:

在 React Native 向 Native 传递数据的过程中, 由于桥接通道中不能直接传 Date 对象, 我们可以手动通过 RCTConvert 进行转换数据, 但是由于存在自动类型转换的特性, 我们可以直接指定 NSDate.
如果传递的参数过多, 可以直接指定 json 格式传递.
通过 RCTResponseSenderBlock 参数进行回调, 将 Native 的数据传递给 React Native 中, 其中它只接受一个 NSArray 参数.
为了能在 iOS 中能正常打印测试, 我们可以调用 RCTLogInfo(), 由于这个宏不能在 Swift 中直接使用, 所以我们还是需要创建 Objective-C 类进行包装一下.

3. constantsToExport 使用

有时我们需要向 React Native 导出常量. 我们可以直接这么做

func constantsToExport() -> [String: Any]! {
        return ["someKey": "someValue"]
}

通过重载 constantsToExport 方法, 导出常量, 这个常量仅仅在初始化的时候导出了一次, 所以即使你在运行期间改变 constantToExport 返回的值, 也不会影响到 JavaScript 环境下所得到的结果.

4. 多线程

通过实现 methodQueue() 方法, 原生模块可以指定自己想在哪个队列中被执行.

func methodQueue() -> DispatchQueue {
        return DispatchQueue.main
}

指定的 methodQueue 会被你模块里的所有方法共享, 如果你的方法中某些是耗时较长的, 你可以在对应方法中指定队列操作.

// 在当前方法中异步操作
DispatchQueue.global().async {
    // your code
}

对于一些其他的功能, 可以参考官网.

参考

React Native 中文官网 - 原生模块

React Native 混合开发 - iOS篇(二)