RN和原生互调

 


OC RN

https://blog.csdn.net/pz789as/article/details/52837853

https://blog.csdn.net/xiangzhihong8/article/details/75092576

https://blog.csdn.net/duyanglu/article/details/51203087




一、在OC代码中 


1#import "RCTEventDispatcher.h" 

2@implementation @synthesize bridge = _bridge; 

3、在需要发布事件的地方调用下面的函数:

_bridge.eventDispatcher sendDeviceEventWithName:(NSString*)eventName body:(id)bodyData


//eventName :事件的名字  bodyData:要传递的数据


二、JS代码中 


1var RCTDeviceEventEmitter = require(‘RCTDeviceEventEmitter’);


2、在需要的地方订阅事件。比如在组件挂载完成后订阅:

componentDidMount: function() {

    this.subscription = RCTDeviceEventEmitter.addListener('orientationDidChange',(dimensions) => {

      console.log(dimensions);

    })

  },


3、记得移除订阅


componentWillUnMount: function() {

    this.subscription.remove();

  },


使用bridge.eventDispatche拦截消息时,有三分方法需要注意。

  • sendAppEventWithName
  • sendDeviceEventWithName
  • sendInputEventWithName 


然后在JS那边也有三个对应的接收接口。


  • RCTAppEventEmitter
  • RCTDeviceEventEmitter
  • RCTInputEventEmitter

 



2 RN OC


https://www.jianshu.com/p/308357ffe7c5


https://blog.csdn.net/horisea/article/details/54176417


https://blog.csdn.net/horisea/article/details/54176417


https://www.jianshu.com/p/1f67628ef214



 



React Native中,一个“原生模块”就是一个实现了“RCTBridgeModule”协议的


oc代码:

———————————————————————————————————————


#import <Foundation/Foundation.h>

 #import <RCTBridgeModule.h> 

@interface NativeTest : NSObject<RCTBridgeModule> 

@end 


#import "NativeTest.h" 

@implementation NativeTest 

//注意:为了实现RCTBridgeModule协议,你的类需要包含RCT_EXPORT_MODULE()宏 

RCT_EXPORT_MODULE(); 

//此处不添加参数即默认为这个OC类的名字 //导出方法,桥接到js的方法返回值类型必须是 void


RCT_EXPORT_METHOD(doSomething:(NSString *)name)

    NSLog(@"doSomething:%@",name); 

}


 @end



js代码:

———————————————————————————————————————


import {

  NativeModules,

  NativeAppEventEmitter

} from 'react-native';


/**

 * [RN调用原生]

 */

var myNativeTest = NativeModules.NativeTest;

class myRNClass extends React.Component {

  render() {

    return (

          <TouchableHighlight onPress={ ()=>myNativeTest.doSomething('test')}>

            <Text style={styles.text}>

            点击

            </Text>

          </TouchableHighlight>

    );

  }

}



———————————————————————————————————————

———————————————————————————————————————


oc代码:

RCT_EXPORT_METHOD(doOther:(NSString *)name callback:(RCTResponseSenderBlock)callback)

{

    NSLog(@"doOther:");

    NSArray *array = @[@"abc",@"acb"];

    callback(@[[NSNull null],array]);

}

———————————————————————————————————————


 js代码:


/**

 * 传参数并带有回调

 */

class myRNTest extends React.Component {

  render() {

    return (

          <TouchableHighlight onPress={ ()=>{myNativeTest.doOther(

            'test',(error,events)=>{

              if (error) {

                console.error(error);

              }else {

                console.log('传值成功');

                this.setState({events:events});

              }

            }

            )}}>

            <Text style={styles.text}>

            点击

            </Text>

          </TouchableHighlight>

    );

  }

}

 


———————————————————————————————————————

———————————————————————————————————————


任何RCTConvert类支持的的类型也都可以使用

RCTConvert还提供了一系列辅助函数,用来接收一个JSON值并转换到原生Objective-C类型或类.



#import "RCTConvert.h"

#import "RCTBridge.h"

#import "RCTEventDispatcher.h"

//  对外提供调用方法,为了演示事件传入属性字段

RCT_EXPORT_METHOD(testDictionaryEvent:(NSString *)name details:(NSDictionary *) dictionary)

{

    NSString *location = [RCTConvert NSString:dictionary[@"thing"]];

    NSDate *time = [RCTConvert NSDate:dictionary[@"time"]];

    

    NSString *info = [NSString stringWithFormat:@"Test: %@\nFor: %@\nTestTime: %@",name,location,time];

    NSLog(@"%@", info);

}


 











阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bravegogo/article/details/80341305
个人分类: ReactNative
想对作者说点什么? 我来说一句

android原生与js互调

2018年01月19日 28.59MB 下载

RN与Android Android 与RN交互

2018年02月12日 110.9MB 下载

没有更多推荐了,返回首页

不良信息举报

RN和原生互调

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭