iOS原生和React-Native之间的交互2

今天看下iOS原生->RN:

这里有个问题:

* 我这里只能通过rn->ios->rn来是实现
* 如果想直接ios-rn 那个iOS中的CalendarManager的self.bridge是nil,只有先通过rn-ios之后该值才有值.
* 这里没搞明白

如果你研究通了,希望留言告诉我

直接撸代码:

RN:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 * iOS调用RN:
 *  我这里只能通过rn->ios->rn来是实现,
 *  如果想直接ios-rn 那个iOS中的CalendarManager的self.bridge是nil,只有先通过rn-ios之后该值才有值.
 *  这里没搞明白
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
    NativeModules,
    NativeAppEventEmitter
} from 'react-native';
var nativeAppEv;
var CalendarManager = NativeModules.CalendarManager;
export default class NativeAddRN extends Component {
  // 构造
    constructor(props) {
      super(props);
      // 初始状态
      this.state = {
        str:''
      };
    }
  render() {
      if(this.state.str == '少停'){
          return (
              <View style={styles.container}>
                <Text style={styles.welcome}>
                    少停
                </Text>
              </View>
          );
      }else {
          return (
              <View style={styles.container}>
                <Text style={styles.welcome}>
                    shaoting
                </Text>
              </View>
          );
      }


  }

    componentWillMount() {

    }

    componentWillMount() {
        CalendarManager.RNCallOC();
        nativeAppEv= NativeAppEventEmitter.addListener(
            'EventReminder',
            (reminder) => {
                this.setState({
                    str:reminder
                })
            }
        );

    }

    componentWillUnmount() {
        nativeAppEv.remove();
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('NativeAddRN', () => NativeAddRN);

iOS原生:

新建一个类CalendarManager,继承于NSObject,实现协议<RCTBridgeModule>

//
//  CalendarManager.h
//  rnAndN
//
//  Created by Shaoting Zhou on 2017/2/10.
//  Copyright © 2017年 Facebook. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
@interface CalendarManager : NSObject<RCTBridgeModule>

@end

//
//  CalendarManager.m
//  rnAndN
//
//  Created by Shaoting Zhou on 2017/2/10.
//  Copyright © 2017年 Facebook. All rights reserved.
// iOS调用原生:
// 我这里只能通过rn->ios->rn来实现,
// 如果想直接ios-rn 那个iOS中的CalendarManager的self.bridge是nil,只有先通过rn-ios之后该值才有值.
// 这里没搞明白
//

#import "CalendarManager.h"
#import "RCTBridge.h"
#import "RCTEventDispatcher.h"
@implementation CalendarManager 
RCT_EXPORT_MODULE();
@synthesize bridge = _bridge;

RCT_EXPORT_METHOD(RNCallOC){
//    [self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:@"少停"];
    [self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:@"shaoting"];

}
@end

效果就是RN可以收到上面这段代码发过去的值:[self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:@"shaoting"];

现在传参数是好了,至于iOS调用RN的方法,以后有时间再弄一下吧.该回到原生开发了.

演示效果和demo源码:https://github.com/pheromone/IOS-native-and-React-native-interaction