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);
}