Each language has its own design concept, grammar and running environment, which also leads to the need for intermediaries to translate when different languages communicate with each other, such as JAVA and C/C++ communicate through JNI, OC and C/C++ need to mix. mm files, and JAVA/OC and Lua need to communicate through C/C++ language as intermediaries. So how does JSX communicate with the underlying module in React-Native? Here the iOS system is the main explanation.
principle
Communication is essentially the exchange of information. Specifically, computer language is the flow of data. The data flow and share between React-Native and the original module in the application, completes the interaction with users, and achieves the application goal. React-Native and OC communication data can only be of the following types (JS type before OC type):
- string-NSString
- number - int/NSInteger/float/double/NSNumber
- boolean - BOOL/NSNumber
- array - NSArray
- object - NSDictionary(NSString type key, value can be other types here)
- func - RCTResponseSenderBlock
Other types of data need to be converted into these types through certain rules (usually converted into JSON strings) and then communicated.
React-Native is essentially the interaction between JS code and OC code through JavaScript Core. framework. Therefore, the following several ways are the same in principle, but the difference lies only in the difference in the form and method of realization.
function call
When encapsulating native modules and providing them to React-Native, the interface functions that can be called by RCT_EXPORT_METHOD() macro can be defined to React-Native side to complete the communication between the two modules.
//The startVPN interface is defined. React-Native passes the specific parameters of VPN into the native module through this interface and opens the specified VPN. RCT_EXPORT_METHOD(startVPN:(NSDictionary*)config) { LSShadowSocksDataMode* mode = [[LSShadowSocksDataMode alloc] initWithDictionary:config]; [self.manager startVPN:mode]; }
In addition to the incoming data, data can be obtained from the primary side in this way. The easiest thing to think about is getting the return value. Unfortunately, the RCT_EXPORT_METHOD macro does not support the return value, but it provides another way to achieve the return value:
RCT_EXPORT_METHOD(isOpen:(RCTResponseSenderBlock)callback) { BOOL open = [self.manager status]; callback(@[[NSNull null], @[@(open)]]); }
Through the form of callback function, the effect of return value is achieved, and the purpose of data exchange is achieved.
Attribute Sharing
This approach is mainly for UI controls. The most basic UI type in React-Native is RCTRootView, which has an initialization method initWithBridge:moduleName:initialProperties:. The third parameter, initialProperties, represents the initial attribute value of the UI control and is NSDictionary, which will eventually be synchronized to the props of React-Native class defined by the second parameter, that is, data exchange between the two modules is completed. .
NSArray *imageList = @[@"http://foo.com/bar1.png", @"http://foo.com/bar2.png"]; NSDictionary *props = @{@"images" : imageList}; RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"ImageBrowserApp" initialProperties:props];
import React, { Component } from 'react'; import { AppRegistry, View, Image, } from 'react-native'; class ImageBrowserApp extends Component { renderImage(imgURI) { return ( <Image source={} /> ); } render() { return ( <View> </View> ); } } AppRegistry.registerComponent('ImageBrowserApp', () => ImageBrowserApp);
Initialization interfaces can only be used when UI components are created. If communication is required during the lifetime of UI components, RCTRootView provides a mechanism such as appProperties:
NSArray *imageList = @[@"http://foo.com/bar3.png", @"http://foo.com/bar4.png"]; rootView.appProperties = @{@"images" : imageList};
notice
In OC, NSNotification Center is used to send a notification to the whole application, and all interested objects will receive the notification and perform corresponding actions. A similar mechanism is provided in React-Native: RCTEventEmitter. After the native module inherits this class, it can send a notification to the React-Native side, and React-Native can receive the notification and process the data transmitted together.
-(void)vpnStatusChanged:(NSNotification*)notification { NEVPNStatus status = [self.manager status]; NSString* value = nil; switch (status) { case NEVPNStatusReasserting: value = @"Reconnection"; break; case NEVPNStatusConnecting: value = @"In connection"; break; case NEVPNStatusConnected: value = @"Connected"; break; case NEVPNStatusDisconnecting: value = @"Disconnecting"; break; case NEVPNStatusDisconnected: case NEVPNStatusInvalid: value = @"End connection"; break; default: break; } if(value){ [self sendEventWithName:@"VpnStatus" body:@{@"status":value}]; } }
The state of VPN is sent to the React-Native side by notification, and the state of VPN is displayed on the UI interface by React-Native.
Summary
This paper simply introduces several common communication modes between the two languages, and does not involve the implementation details behind them. For those who are interested in this aspect, please refer to the following two articles:
Detailed Explanation of React Native Communication Mechanism
Analysis of React Native's Communication Mechanism