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