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代码中 

1、var 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);

}