RNiOS集成ReactNavite编程

RN 调用原生方法(iOS)、原生(iOS)调用RN方法

2019-03-21  本文已影响35人  精神病患者link常

RN 调用原生方法(iOS)

//
//  RNBridge.h
//  demo
//
//  Created by chj on 2019/3/20.
//  Copyright © 2019 Facebook. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>


@interface RNBridge : NSObject<RCTBridgeModule>

@end


//
//  RNBridge.m
//  demo
//
//  Created by chj on 2019/3/20.
//  Copyright © 2019 Facebook. All rights reserved.
//

#import "RNBridge.h"
#import <React/RCTBridge.h>

#import "PageAViewController.h"
#import "AppDelegate.h"

@implementation RNBridge
@synthesize bridge = _bridge;

RCT_EXPORT_MODULE();

// RN 跳转原生
RCT_EXPORT_METHOD(jumpNativePage){
  
  dispatch_async(dispatch_get_main_queue(), ^{
    AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
    
    [appDelegate.navigationVCtrl pushViewController:[PageAViewController new] animated:YES];
    
  });
  
}

//
RCT_EXPORT_METHOD(back){
  dispatch_async(dispatch_get_main_queue(), ^{
    AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
    
    [appDelegate.navigationVCtrl popViewControllerAnimated:YES];
    
  });
}


@end

RN使用

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {
    NativeModules,
} from 'react-native';

const RNBridge = NativeModules.RNBridge;

<TouchableOpacity style={styles.container}
                onPress={()=>{
                    RNBridge.jumpNativePage()

                }}>
            </TouchableOpacity>

原生(iOS)调用RN方法

//
//  SendEventManager.h
//  demo
//
//  Created by chj on 2019/3/20.
//  Copyright © 2019 Facebook. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>

NS_ASSUME_NONNULL_BEGIN

@interface SendEventManager :  RCTEventEmitter <RCTBridgeModule>
+ (void)emitEventWithName:(NSString *)name andInfo:(NSDictionary *)info;

@end

NS_ASSUME_NONNULL_END

//
//  SendEventManager.m
//  demo
//
//  Created by chj on 2019/3/20.
//  Copyright © 2019 Facebook. All rights reserved.
//

#import "SendEventManager.h"

@implementation SendEventManager
RCT_EXPORT_MODULE();

- (NSArray<NSString *> *)supportedEvents
{
  return @[@"ABC"];
}


- (void)startObserving {
  [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(emitEvent:) name:@"sendEmmit" object:nil];
  
}
- (void)stopObserving {
  [[NSNotificationCenter defaultCenter] removeObserver:self];
  
}
- (void)emitEvent:(NSNotification *)notification{
  [self sendEventWithName:@"ABC" body:notification.userInfo];
  
}
+ (void)emitEventWithName:(NSString *)name andInfo:(NSDictionary *)info{
  [[NSNotificationCenter defaultCenter] postNotificationName:@"sendEmmit"                                                      object:self userInfo:info];
  
}



@end

原生使用
[SendEventManager emitEventWithName:@"ABC" andInfo:@{}];
RN使用

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {
    NativeModules,
    NativeEventEmitter
} from 'react-native';

const sendEventManagerEmitter = new NativeEventEmitter(NativeModules.SendEventManager);

 // 原生给RN发送消息
this.listener = sendEventManagerEmitter.addListener('ABC', (obj)=>{
...
})
componentWillUnmount() {
    this.listener.remove()
}

上一篇下一篇

猜你喜欢

热点阅读