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

Z时代
2024-01-10
分类：综合

react

今天看下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