文章出处: http://www.cocoachina.com/ios/20160510/16174.html
前段时间做了个ReactNative的App,发现ReactNative中不少组件并不存在,所以还是需要自己对原生模块进行编写让JS调用,正是因为在这个编写过程中遇到不少问题,发觉了官网文档中许多的不足。所以产生了写一个实践教程的想法,最终有了这么一篇文章。
整篇文章主要以编写一个原生模块为例子,来讲述了我们在编写原生模块所用到的一些知识,并且在整个例子中,配有了完整的实践代码,方便大家理解并调试。除了这些内容,文章还讲述了我们如何将自己编写的原生模块发布到npm上分享给别人使用。希望能够给大家带来帮助,也希望大家将自己编写的原生模块分享出来。
示例代码github地址:https://github.com/liuchungui/react-native-BGNativeModuleExample
准备工作:
创建ReactNative工程
我们需要先创建一个ReactNative工程,使用如下命令创建。
1
|
react native init TestProject
|
创建好工程之后,我们使用xcode打开TestProject/ios/下的iOS工程。
创建静态库,并将这个静态库手动链接到工程中
首先,我们在前面创建的ReactNative工程下的node_modules创建一个文件夹react-native-BGNativeModuleExample,然后我们在新创建的文件夹下再创建一个ios文件夹。
1
2
3
4
|
$ cd TestProject/node_modules
$ mkdir react-native-BGNativeModuleExample
$ cd react-native-BGNativeModuleExample
$ mkdir ios
|
然后,由于ReactNative的组件都是一个个静态库,我们发布到npm给别人使用的话,也需要建立静态库。我们使用Xcode建立静态库,取名为BGNativeModuleExample。建立之后,我们将创建的静态库中的文件全部copy到node_modules/react-native-BGNativeModuleExample/ios目录下。
iOS文件目录如下:
1
2
3
4
|
|____BGNativeModuleExample
| |____BGNativeModuleExample.h
| |____BGNativeModuleExample.m
|____BGNativeModuleExample.xcodeproj
|
最后,我们需要手动将这个静态库链接到工程中。
1、使用xcode打开创建的静态库,添加一行Header Search Paths,值为$(SRCROOT)/../../react-native/React,并设置为recursive。
2、将BGNativeModuleExample静态库工程拖动到工程中的Library中。
3、选中 TARGETS => TestProject => Build Settings => Link Binary With Libraries,添加libBGNativeModuleExample.a这个静态库
到此,我们准备工作完成了。我们这里这么准备是有用意的,那就是模拟npm链接的过程,建立好了环境,避免了发布到npm上后别人使用找不到静态库的问题。
一、编写原生模块代码
1、创建原生模块
选中我们创建的BGNativeModuleExample静态库,然后在BGNativeModuleExample.h文件中导入RCTBridgeModule.h,让BGNativeModuleExample类遵循RCTBridgeModule协议。
1
2
3
|
//BGNativeModuleExample.h文件的内容如下
#import #import "RCTBridgeModule.h"
@interface BGNativeModuleExample : NSObject @end
|
在BGNativeModuleExample.m文件中,我们需要实现RCTBridgeModule协议。为了实现RCTBridgeModule协议,我们的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果不指定,默认会使用这个类的名字。
在这里,我们指定了模块的名字为BGNativeModuleExample。
1
|
RCT_EXPORT_MODULE(BGNativeModuleExample);
|
实现了RCTBridgeModule协议之后,我们就可以在js中如下获取到我们创建的原生模块。
1
2
|
import { NativeModules } from
'react-native'
;
var
BGNativeModuleExample = NativeModules.BGNativeModuleExample;
|
需要注意的是,RCT_EXPORT_MODULE宏传递的参数不能是OC中的字符串。如果传递@“BGNativeModuleExample",那么我们导出给JS的模块名字其实是@"BGNativeModuleExample",使用BGNativeModuleExample就找不到了。在这里,我们其实可以通过打印NativeModules来查找到我们创建的原生模块。
2、为原生模块添加方法
我们需要明确的声明要给JS导出的方法,否则ReactNative不会导出任何方法。声明通过RCT_EXPORT_METHOD()宏来实现:
1
2
3
|
RCT_EXPORT_METHOD(testPrint:(NSString *)name info:(NSDictionary *)info) {
RCTLogInfo(@
"%@: %@"
, name, info);
}
|
在JS中,我们可以这样调用这个方法:
1
2
3
4
|
BGNativeModuleExample.testPrint(
"Jack"
, {
height:
'1.78m'
,
weight:
'7kg'
});
|
3、参数类型
RCT_EXPORT_METHOD()支持所有标准的JSON类型,包括:
-
string (NSString)
-
number (NSInteger, float, double, CGFloat, NSNumber)
-
boolean (BOOL, NSNumber)
-
array (NSArray) 包含本列表中任意类型
-
map (NSDictionary) 包含string类型的键和本列表中任意类型的值
-
function (RCTResponseSenderBlock)
除此以外,任何RCTConvert类支持的的类型也都可以使用(参见RCTConvert了解更多信息)。RCTConvert还提供了一系列辅助函数,用来接收一个JSON值并转换到原生Objective-C类型或类。
了解更多请点击原生模块。
4、回调函数
警告:本章节内容目前还处在实验阶段,因为我们还并没有太多的实践经验来处理回调函数。
回调函数,在官方的文档中是有上面的一个警告,不过在使用过程暂时未发现问题。在OC中,我们添加一个getNativeClass方法,将当前模块的类名回调给JS。
1
2
3
|
RCT_EXPORT_METHOD(getNativeClass:(RCTResponseSenderBlock)callback) {
callback(@[NSStringFromClass([self class])]);
}
|
在JS中,我们通过以下方式获取到原生模块的类名
1
2
3
|
BGNativeModuleExample.getNativeClass(name => {
console.log(
"nativeClass: "
, name);
});
|
原生模块通常只应调用回调函数一次。但是,它们可以保存callback并在将来调用。这在封装那些通过“委托函数”来获得返回值的iOS API时最常见。
5、Promises
原生模块还可以使用promise来简化代码,搭配ES2016(ES7)标准的async/await语法则效果更佳。如果桥接原生方法的最后两个参数是RCTPromiseResolveBlock和RCTPromiseRejectBlock,则对应的JS方法就会返回一个Promise对象。
我们通过Promises来实现原生模块是否会响应方法,响应则返回YES,不响应则返回一个错误信息,代码如下:
1
2
3
4
5
6
7
8
9
10
11
|
RCT_REMAP_METHOD(testRespondMethod,
name:(NSString *)name
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject) {
if
([self respondsToSelector:NSSelectorFromString(name)]) {
resolve(@YES);
}
else
{
reject(@
"-1001"
, @
"not respond this method"
, nil);
}
}
|
在JS中,我们有两种方式调用,第一种是通过then....catch的方式:
1
2
3
4
5
6
7
|
BGNativeModuleExample.testRespondMethod(
"dealloc"
)
.then(result => {
console.log(
"result is "
, result);
})
.
catch
(error => {
console.log(error);
});
|
第二种是通过try...catch来调用,与第一种相比,第二种会报警告”Possible Unhandled Promiss Rejection (id:0)“。
1
2
3
4
5
6
7
8
9
10
|
async testRespond() {
try
{
var
result = BGNativeModuleExample.testRespondMethod(
"hell"
);
if
(result) {
console.log(
"respond this method"
);
}
}
catch
(e) {
console.log(e);
}
}
|
注意: 如果使用Promiss我们不需要参数,则在OC去掉name那一行就行了;如果需要多个参数,在name下面多加一行就行了,注意它们之间不需要添加逗号。
6、多线程
我们这里操作的模块没有涉及到UI,所以专门建立一个串行的队列给它使用,如下:
1
|
return
dispatch_queue_create(
"com.liuchungui.demo"
, DISPATCH_QUEUE_SERIAL);
|
注意: 在模块之间共享分发队列
methodQueue方法会在模块被初始化的时候被执行一次,然后会被React Native的桥接机制保存下来,所以你不需要自己保存队列的引用,除非你希望在模块的其它地方使用它。但是,如果你希望在若干个模块中共享同一个队列,则需要自己保存并返回相同的队列实例;仅仅是返回相同名字的队列是不行的。
更多线程的操作细节可以参考:http://reactnative.cn/docs/0.24/native-modules-ios.html#content
7、导出常量
原生模块可以导出一些常量,这些常量在JavaScript端随时都可以访问。用这种方法来传递一些静态数据,可以避免通过bridge进行一次来回交互。
OC中,我们实现constantsToExport方法,如下:
1
2
3
4
5
|
- (NSDictionary *)constantsToExport {
return
@{ @
"BGModuleName"
: @
"BGNativeModuleExample"
,
TestEventName: TestEventName
};
}
|
JS中,我们打印一下这个常量
1
|
console.log(
"BGModuleName value is "
, BGNativeModuleExample.BGModuleName);
|
但是注意这个常量仅仅在初始化的时候导出了一次,所以即使你在运行期间改变constantToExport返回的值,也不会影响到JavaScript环境下所得到的结果。
8、给JS发送事件
即使没有被JS调用,本地模块也可以给JS发送事件通知。最直接的方式是使用eventDispatcher。
在这里,我们为了能够接收到事件,我们开一个定时器,每一秒发送一次事件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#import "BGNativeModuleExample.h"
#import "RCTEventDispatcher.h"
@implementation BGNativeModuleExample
@synthesize bridge = _bridge;
- (instancetype)init {
if
(self = [
super
init]) {
[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(sendEventToJS) userInfo:nil repeats:YES];
}
return
self;
}
- (void)receiveNotification:(NSNotification *)notification {
[self.bridge.eventDispatcher sendAppEventWithName:TestEventName body:@{@
"name"
: @
"Jack"
}];
}
@end
|
在JS中,我们这样接收事件
1
2
3
|
NativeAppEventEmitter.addListener(BGNativeModuleExample.TestEventName, info => {
console.log(info);
});
|
注意: 编写OC代码时,需要添加@synthesize bridge = _bridge;,否则接收事件的时候就会报Exception -[BGNativeModuleExample brige]; unrecognized selector sent to instance的错误。
上面原生代码就编写好了,主要以代码实践为主,弥补官方文档中的一些不足,如果要需要了解更多的原生模块封装的知识,可以参考原生模块,也可以参考官方的源代码。
二、发布上线
我们按照上面步骤编写好原生模块之后,接下来将我们写的原生模块发布到npm。
1、我们需要创建github仓库
在github上创建一个仓库react-native-BGNativeModuleExample,然后关联到我们前面创建的react-native-BGNativeModuleExample目录
1
2
3
|
$ cd TestProject/node_modules/react-native-BGNativeModuleExample
$ git init .
$ git remote add origin https:
//github.com/liuchungui/react-native-BGNativeModuleExample.git
|
2、我们需要创建原生模块的入口文件
我们需要在react-native-BGNativeModuleExample目录下创建一个index.js,它是整个原生模块的入口,我们这里只是将原生进行导出。
1
2
3
|
//index.js
import React, { NativeModules } from
'react-native'
;
module.exports = NativeModules.BGNativeModuleExample;
|
3、发布到npm
在发布到npm之前,我们需要创建一个package.json文件,这个文件包含了module的所有信息,比如名称、版本、描述、依赖、作者、license等。 我们在react-native-BGNativeModuleExample根目录下使用npm init命令来创建package.json,系统会提示我们输入所需的信息,不想输入的直接按下Enter跳过。
1
2
3
4
5
6
7
8
9
|
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json`
for
definitive documentation on these fields
and exactly what they
do
.
Use `npm install --save` afterwards to install a package and
save it as a dependency
in
the package.json file.
Press ^C at any time to quit.
name: (react-native-BGNativeModuleExample)
|
输入完成之后,系统会要我们确认文件的内容是否有误,如果没有问题直接输入yes,那么package.json就创建好了。 我这里创建的package.json文件如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
{
"name"
:
"react-native-nativemodule-example"
,
"version"
:
"1.0.0"
,
"description"
:
""
,
"main"
:
"index.js"
,
"scripts"
: {
"test"
:
"echo \"Error: no test specified\" && exit 1"
},
"repository"
: {
"type"
:
"git"
,
},
"author"
:
""
,
"license"
:
"ISC"
,
"bugs"
: {
},
}
|
如果我们编写的原生模块依赖于其他的原生模块,我们需要在package.json添加依赖关系,我们这里由于没有相关依赖,所以不需要添加:
1
2
|
"dependencies"
: {
}
|
初始化完package.json,我们就可以发布到npm上面了。
如果没有npm的账号,我们需要注册一个账号,这个账号会被添加到npm本地的配置中,用来发布module用。
1
2
3
4
|
$ npm adduser
Username: your name
Password: your password
Email: yourmail@gmail.com
|
成功之后,npm会把认证信息存储在~/.npmrc中,并且可以通过以下命令查看npm当前使用的用户:
1
|
$ npm whoami
|
以上完成之后,我们就可以进行发布了。
1
2
|
$npm publish
+ react-native-nativemodule-example@1.0.0
|
到这里,我们已经成功把module发布到了npmjs.org。当然,我们也别忘记将我们的代码发布到github。
1
2
3
4
|
$ git pull origin master
$ git add .
$ git commit -m
'add Project'
$ git push origin master
|
有时候,有些文件没必要发布,例如Example文件,我们就可以通过.npmignore忽略它。例如我这里.npmignore文件内容如下:
1
2
3
4
|
Example/
.git
.gitignore
.idea
|
这样的话,我们npm进行发布的时候,就不会将Example发布到npm上了。
4、添加Example,测试是否可用,添加README
我们在react-native-BGNativeModuleExample目录下创建一个Example的ReactNative工程,并且通过rnpm install react-native-nativemodule-example命令安装我们发布的react-native-nativemodule-example模块。
1
2
3
4
5
6
|
$ rnpm install react-native-nativemodule-example
TestProject@0.0.1 /Users/user/github/TestProject
└── react-native-nativemodule-example@1.0.0
rnpm-link info Linking react-native-nativemodule-example ios dependency
rnpm-link info iOS module react-native-nativemodule-example has been successfully linked
rnpm-link info Module react-native-nativemodule-example has been successfully installed & linked
|
上面提示安装并且link成功,我们就可以在js中进行使用了。
1
2
3
4
5
|
import BGNativeModuleExample from
'react-native-nativemodule-example'
;
BGNativeModuleExample.testPrint(
"Jack"
, {
height:
'1.78m'
,
weight:
'7kg'
});
|
5、我们在发布上线之后还需要编写README文件。
README文件是非常重要的,如果没有README文件,别人看到我们的原生组件,根本就不知道我们这个组件是用来干啥的。所以,我们很有必要添加一个README文件,这个文件需要告诉别人我们这个原生组件是干什么的、如何安装、API、使用手册等等。
6、原生模块升级,发布新版本
当我们添加新代码或者修复bug后,需要发布新的版本,我们只需要修改package.json文件中的version的值就行了,然后使用npm publish进行发布。
总结
本篇文章主要分成两个部分,一是讲述了编写原生模块的知识,二是将我们编写的内容发布到npm上。
参考