上篇文章主要讲了如何在 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
#import
@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
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 中文官网 - 原生模块