首页 > React Native, iOS 开发, 随感 > React Native 实践 — Object C 和 Js 互相调用

React Native 实践 — Object C 和 Js 互相调用

React Native实践中经常遇到的由于RCT的实现方案或者已知的不足导致的可能需要调用OC的module来实现些功能,也可能遇到OC调用RCT js的功能的地方,今天主要从实践的角度记录先现阶段RCT和OC的互相调用。

从RCT js调用OC native的角度举个例子, 以image上传为例
RCT 提供了通过form data 形式上传的例子,使用XMLHttpRequest来实现,具体可以参考例子
如果遇到一些复杂的案例可能需要对data进行相应的封装。我们也可以直接使用RCT调用OC的方式来实现上传。
RCT通过对NativeModules的引用加入对目标方法所在模块的饮用:

/**
 * @author wuyingmin
 * @function for uploading func
 */
'use strict'

var AnswerViewManager = require('react-native').NativeModules.AnswerViewManager
……
class UploadFile {
……
 AnswerViewManager.upload(imageDic, fun) // 调用post方式添加到阿里云服务器
……
}
module.exports = UploadFile

Native:

……
@implementation AnswerViewManager
……
RCT_EXPORT_MODULE()

RCT_EXPORT_METHOD(upload:(NSDictionary *)input callback:(RCTResponseSenderBlock)callback)
{

  NSString *uri = input[@"uri"];
//  NSLog(@"%@", [self mimeTypeForPath: uri]);
  if([uri hasPrefix:@"assets-library"]){
    [self uploadAssetsLibrary:input callback:callback];
  }
  else if([uri hasPrefix:@"data:"]){
    [self uploadUri:input callback:callback];
  }
  else if([uri hasPrefix:@"file:"]){
    [self uploadUri:input callback:callback];
  }
  else if ([uri isAbsolutePath]) {
    [self uploadFile:input callback:callback];
  }
  else{
    callback(@[RCTMakeError(@"Unknown protocol for key: 'file'", nil, nil)]);
  }
}

通过不同的file前缀native这里实现相关的上床逻辑即可。 通过RCT调用Native的过程中我们需要注意的是RCT_EXPORT_MODULE()的添加及对可能存在的callback函数的预先设置。

那么从OC native调用RCT js的角度来看会稍微复杂一些。举个例子富文本编辑器。
首先RCT的角度需要添加native模块的引用并添加相关的回调事件监听

var { requireNativeComponent } = React
var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter')
……
var AnswerView = requireNativeComponent('AnswerView', null)

……
componentDidMount () {
    subscriptions.push(RCTDeviceEventEmitter.addListener(
      'AppOpenedFromNotification',
      (e) => {
        if (e.name === 'back') {
          this.gotopre()
        }
        if (e.name === 'post') {
        }
      }
    ))
  },
render () {
    return (
……

……
    	)
    }
……
  componentWillUnmount () {
    subscriptions = []
    RCTDeviceEventEmitter.removeAllListeners('AppOpenedFromNotification')
  },
……

OC native 这边同样的引入RCT_EXPORT_MODULE(),之后添加对props的引用

RCT_EXPORT_VIEW_PROPERTY(navtitle, NSString);
RCT_EXPORT_VIEW_PROPERTY(lefttitle, NSString);

在实际的方法中,RCT 帮你预设了Set相关的方法具体如下:

- (void) setNavtitle: (NSString *) navtitle
{
  //todo
}
-(void) setLefttitle: (NSString *) lefttitle
{
  //todo
}

这样可以很好的串联整个功能然后通过

 [event sendDeviceEventWithName:@"AppOpenedFromNotification" body:@{@"name": @"post",@"content": textView.text}]

来对RCT监听事件进行反馈

整个RCT 和 native的调用还是十分平滑,但仍然要对性能及iOS SDK升级的问题进行综合考虑。 RCT还在不断的完善中,希望其越来越好。
下一章jason将分享下即时更新的策略及实现


———EOF———

作者: 吴颖敏 | www.futurehandw.com
Email: wuyingminhui@gmail.com
转载请注明来源:吴颖敏 - www.futurehandw.com



分类: React Native, iOS 开发, 随感 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.