For the current mobile terminal native development, it is relatively easy to complete the development of an app, because there are thousands of open source third-party components provided by native code on the Internet, enough to support your business needs. But what if we want to use third-party components on React Native?

As we all know, React Native framework also provides some basic components, which can basically meet our development requirements. However, what if we need to use third-party interfaces? Currently, React Native is not supported by all third-party interfaces on the market. Therefore, we have to package React Native by ourselves when we need to use a third party.

Next, we will encapsulate the components shared by UmENG step by step.

1. Import the UMENG sharing SDK first, and then add related low-level dependency files:




1.png

Project –> Build Phases –> Link binary with Libraries Add the link binary with Libraries by clicking the plus sign, as shown in the figure below.




2.png

2. After adding the dependency files, we will finish the part of the code in the native. (1) the application of the AppDelegate: didFinishLaunchingWithOptions: method of setting their Allies AppKey:

// Set UMSocialData setAppKey:@" 57355f3e67e58ED0a50030A1 "];Copy the code

(2) Write a share button class, inherit from UIButton, and introduce umsocial. h in it, then write the share event triggered by the button.

#import "mysharebt. h" #import "UMSocial. H" @implementation MyShareBt initWithFrame:(CGRect)frame{ if ((self = [super initWithFrame:frame])) { [self addTarget:self action:@selector(share) forControlEvents:UIControlEventTouchUpInside]; } return self; } // Button share event - (void)share {[UMSocialSnsService presentSnsIconSheetView:[UIApplication SharedApplication]. KeyWindow. RootViewController appKey: @ "yourAppKey shareText:" @ "test" shareImage: [UIImage ImageNamed: @ "yourImageName"] shareToSnsNames: [NSArray arrayWithObjects:UMShareToWechatSession,UMShareToWechatTimeline,UMShareToQzone,UMShareToSina,UMShareToTencent,nil] delegate:nil]; } @endCopy the code

(3) Share component Manager class, which inherits from RCTViewManager. Once created, add the tag macro RCT_EXPORT_MODULE() to export the module as a component. Finally, implement the -(UIView *)view method. The code is as follows:

#import "shareButtonManager.h"
#import "RCTViewManager.h"
#import "UMSocial.h"
#import "MyShareBt.h"

@interface shareBt : RCTViewManager

@property (nonatomic) MyShareBt *bt;

@end

@implementation shareBt

RCT_EXPORT_MODULE()

- (UIView *)view
{
  _bt = [[MyShareBt alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
  return _bt;
}

@endCopy the code

At this point, the basic presentation of the native part code is complete, and it needs to be further encapsulated in JS to provide for JS calls.

3, the next implementation of JS component encapsulation and simple call. First import the native component, take the component we created from the import and export it as the default component for other JS calls. In this case, we could have called it directly from another JS, but in order to encapsulate the parameter, we also need to encapsulate it as a separate component.

import React, { Component, PropTypes } from 'react'; import { requireNativeComponent} from 'react-native'; var ShareBt = requireNativeComponent('shareBt', ZKShareBt); export default class ZKShareBt extends Component { render() { return ( ); }}Copy the code

Encapsulate component calls. Here we have wrapped many of the parameters that JS needs to pass to the native. Next, we will talk about wrapping parameters and event handling.

Copy the code

4. Parameter encapsulation (1) Define the parameters to be passed

#import @interface MyShareBt : UIButton @property (nonatomic, copy) NSString * appKey; // appKey@property (nonatomic, copy) NSString * shareText; @property (nonatomic, copy) NSString * imageName; @property (nonatomic, copy) NSString * myTitle; // Share button title @property (nonatomic) UIColor * color; @property (nonatomic, copy) NSString * btImageName; // Share button image @endCopy the code

(2) The above parameters are the ones we need to pass from JS to native, so we first define the required parameters in native code. Once defined, we need to export it to JS using the RCT_EXPORT_VIEW_PROPERTY macro.

#import "shareButtonManager.h" #import "RCTViewManager.h" #import "UMSocial.h" #import "MyShareBt.h" @interface shareBt : RCTViewManager @property (nonatomic) MyShareBt *bt; @end @implementation shareBt RCT_EXPORT_MODULE() - (UIView *)view { _bt = [[MyShareBt alloc] initWithFrame:CGRectMake(0, 0, 0, 0)]; return _bt; } // export the required parameters to JS RCT_EXPORT_VIEW_PROPERTY(appKey, NSString) NSString) RCT_EXPORT_VIEW_PROPERTY(imageName, NSString) RCT_EXPORT_VIEW_PROPERTY(myTitle, NSString) RCT_EXPORT_VIEW_PROPERTY(color, UIColor) RCT_EXPORT_VIEW_PROPERTY(btImageName, NSString) @endCopy the code

(3) Rewrite parameter set method, assign value to button attribute, set UI.

#import "MyShareBt.h" #import "UMSocial.h" @implementation MyShareBt - (instancetype) initWithFrame:(CGRect)frame{ if ((self = [super initWithFrame:frame])) { [self addTarget:self action:@selector(share) forControlEvents:UIControlEventTouchUpInside]; } return self; } // Override the set method of the passed argument, And passed parameters is used to set the user interface (UI) - (void) setMyTitle: (nsstrings *) myTitle {[self setTitle: myTitle forState: UIControlStateNormal]; } - (void)setColor:(UIColor *)color{ [self setTitleColor:color forState:UIControlStateNormal]; } - (void)setBtImageName:(NSString *)btImageName{ [self setBackgroundImage:[UIImage imageNamed:btImageName] forState:UIControlStateNormal]; } - (void)share { [UMSocialSnsService presentSnsIconSheetView:[UIApplication sharedApplication].keyWindow.rootViewController appKey:_appKey shareText:_shareText shareImage:[UIImage imageNamed:_imageName] shareToSnsNames:[NSArray arrayWithObjects:UMShareToWechatSession,UMShareToWechatTimeline,UMShareToQzone,UMShareToSina,UMShareToTencent,nil] delegate:nil]; } @endCopy the code

(4) Encapsulate the parameters in JS.

import React, { Component, PropTypes } from 'react'; import { requireNativeComponent} from 'react-native'; var ShareBt = requireNativeComponent('shareBt', ZKShareBt); Export Default Class ZKShareBt extends Component {static propTypes = {/** ** Defines the attributes that the Component needs to pass to the native end * use React.PropTypes for verification * / / / the use of third party sharing Settings appKey appKey: PropTypes. String, / / to share content shareText: PropTypes. String, / / need to share the image name (want beforehand in the xcode project, only name, Don't need a path) imageName: PropTypes string, / / share button caption myTitle: PropTypes. String, / / share button caption color color: PropTypes. String, / / share button image btImageName: PropTypes string,}; render() { return ( ); }}Copy the code

Once wrapped, you can call it directly.

Copy the code

Running results:




3.png




4.png

(In the first figure, the view in other apps is accidentally encapsulated. Here, network data can be requested through fetch, traffic can be obtained and sent to the native, and the percentage of traffic can be dynamically displayed according to the change of value. Please automatically ignore…)

That’s the wrapping that involves UI and related parameter passing. Next, the wrapping of events is needed. The event encapsulation uses the RCTBubblingEventBlock macro. Encapsulating events is that, first of all, we need to define the method module that needs to be called in JS first. Put it in the native UI module.h file as defined before

MyShareBt.h

/** Button clicked */ @Property (nonatomic, copy) RCTBubblingEventBlock onButtonClicked;Copy the code

As with the parameters, we need to export:

shareButtonManager.m

RCT_EXPORT_VIEW_PROPERTY(onButtonClicked, RCTBubblingEventBlock)Copy the code

Once exported, I’ll simply define a Delegate method that is triggered when the share button is clicked

MyShareBt.h

@ protocol ShareButtonClickedDelegate @ optional/agents/method - (void) ButtonClicked; @endCopy the code
@property (nonatomic, strong) id  ClickDelagate;Copy the code

This proxy method executes when the button is clicked to share:

MyShareBt.m

- (void)share {// Call the proxy method [self.clickdelagate ButtonClicked]; / / share their Allies [UMSocialSnsService presentSnsIconSheetView: [UIApplication sharedApplication]. KeyWindow. The rootViewController appKey:_appKey shareText:_shareText shareImage:[UIImage imageNamed:_imageName] shareToSnsNames:[NSArray arrayWithObjects:UMShareToWechatSession,UMShareToWechatTimeline,UMShareToQzone,UMShareToSina,UMShareToTencent,nil] delegate:nil]; }Copy the code

Next, implement the proxy method (I set a random number here, pass to JS, provide JS to use, then JS can directly use the random number passed) :

shareButtonManager.m

#pragma mark ShareButtonClickedDelegate - (void)ButtonClicked { NSInteger x = arc4random() % 100; NSLog(@" native event %ld",x); _bt.onButtonClicked(@{@"randomValue": [NSNumber numberWithInteger:x]}); }Copy the code

Again, add onButtonClicked to the arguments.

ZKShareButton.js

/ / button click event onButtonClicked: PropTypes func,Copy the code

After you add it, you can call it as follows:

OnButtonClicked = {(event) = > {the console. The log (' React events' + event. NativeEvent. RandomValue); }}Copy the code

The results show:




5.png

NativeViewTestDemo: NativeViewTestDemo github.com/cainvan/Nat

React-native zkbanner ReactBannerDemo is an example of iOS platform rote component

React-zkcarousel is an H5 terminal multicast component