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

今天看下iOS原生->RN:

這裏有個問題:

* 我這裏只能經過rn->ios->rn來是實現
* 若是想直接ios-rn 那個iOS中的CalendarManager的self.bridge是nil,只有先經過rn-ios以後該值纔有值.
* 這裏沒搞明白

若是你研究通了,但願留言告訴我

直接擼代碼:

RN:

 1 /**
 2  * Sample React Native App
 3  * https://github.com/facebook/react-native
 4  * @flow
 5  * iOS調用RN:
 6  *  我這裏只能經過rn->ios->rn來是實現,
 7  *  若是想直接ios-rn 那個iOS中的CalendarManager的self.bridge是nil,只有先經過rn-ios以後該值纔有值.
 8  *  這裏沒搞明白
 9  */
10 
11 import React, { Component } from 'react';
12 import {
13   AppRegistry,
14   StyleSheet,
15   Text,
16   View,
17     NativeModules,
18     NativeAppEventEmitter
19 } from 'react-native';
20 var nativeAppEv;
21 var CalendarManager = NativeModules.CalendarManager;
22 export default class NativeAddRN extends Component {
23   // 構造
24     constructor(props) {
25       super(props);
26       // 初始狀態
27       this.state = {
28         str:''
29       };
30     }
31   render() {
32       if(this.state.str == '少停'){
33           return (
34               <View style={styles.container}>
35                 <Text style={styles.welcome}>
36                     少停
37                 </Text>
38               </View>
39           );
40       }else {
41           return (
42               <View style={styles.container}>
43                 <Text style={styles.welcome}>
44                     shaoting
45                 </Text>
46               </View>
47           );
48       }
49 
50 
51   }
52 
53     componentWillMount() {
54 
55     }
56 
57     componentWillMount() {
58         CalendarManager.RNCallOC();
59         nativeAppEv= NativeAppEventEmitter.addListener(
60             'EventReminder',
61             (reminder) => {
62                 this.setState({
63                     str:reminder
64                 })
65             }
66         );
67 
68     }
69 
70     componentWillUnmount() {
71         nativeAppEv.remove();
72     }
73 }
74 
75 const styles = StyleSheet.create({
76   container: {
77     flex: 1,
78     justifyContent: 'center',
79     alignItems: 'center',
80     backgroundColor: '#F5FCFF',
81   },
82   welcome: {
83     fontSize: 20,
84     textAlign: 'center',
85     margin: 10,
86   },
87   instructions: {
88     textAlign: 'center',
89     color: '#333333',
90     marginBottom: 5,
91   },
92 });
93 
94 AppRegistry.registerComponent('NativeAddRN', () => NativeAddRN);

iOS原生:

新建一個類CalendarManager,繼承於NSObject,實現協議<RCTBridgeModule>

 1 //
 2 //  CalendarManager.h
 3 //  rnAndN
 4 //
 5 //  Created by Shaoting Zhou on 2017/2/10.
 6 //  Copyright © 2017年 Facebook. All rights reserved.
 7 //
 8 
 9 #import <Foundation/Foundation.h>
10 #import <React/RCTBridgeModule.h>
11 #import <React/RCTLog.h>
12 @interface CalendarManager : NSObject<RCTBridgeModule>
13 
14 @end

 1 //
 2 //  CalendarManager.m
 3 //  rnAndN
 4 //
 5 //  Created by Shaoting Zhou on 2017/2/10.
 6 //  Copyright © 2017年 Facebook. All rights reserved.
 7 // iOS調用原生:
 8 // 我這裏只能經過rn->ios->rn來實現,
 9 // 若是想直接ios-rn 那個iOS中的CalendarManager的self.bridge是nil,只有先經過rn-ios以後該值纔有值.
10 // 這裏沒搞明白
11 //
12 
13 #import "CalendarManager.h"
14 #import "RCTBridge.h"
15 #import "RCTEventDispatcher.h"
16 @implementation CalendarManager 
17 RCT_EXPORT_MODULE();
18 @synthesize bridge = _bridge;
19 
20 RCT_EXPORT_METHOD(RNCallOC){
21 //    [self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:@"少停"];
22     [self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:@"shaoting"];
23 
24 }
25 @end

效果就是RN能夠收到上面這段代碼發過去的值:[self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:@"shaoting"];

如今傳參數是好了,至於iOS調用RN的方法,之後有時間再弄一下吧.該回到原生開發了.

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