A:
React Native (RN for short) is a cross-platform mobile application development framework that Facebook opened source in April 2015. It is a derivative of Facebook’s early open source JS framework React on the Native mobile application platform. It currently supports iOS and Android platforms. RN uses the Javascript language, HTML-like JSX, and CSS to develop mobile applications, so technicians familiar with Web front-end development can enter mobile application development with minimal learning.
In the development of React Native mobile platform project, in addition to some packaged plug-ins and original components provided by React Native, many other plug-ins need to be used in actual projects. Such as network request, database, camera, album, address book, video player, browser, Bluetooth connection, picture processing, message push, map, statistics, buried point and other functions needed in APP development, all provide encapsulated plug-ins for IDE development platform for project development.
In addition, these blog posts are from the technical summary in my daily development. If time permits, I will share iOS and Android versions respectively for the technical points. If you need other technical points, you can leave a message after the article, and I will try my best to help you. This article focuses on the development and use of the native password keyboard plug-in
Source code Demo access method
If you need React Native password keyboard plug-in source code demo, please follow [net development] wechat official account, reply [62] to receive.
Net the world method, convenient for you and ME to develop, all documents will continue to update, welcome to pay attention to grow together!
Two: realize the analysis of ideas
The native password keyboard plug-in needs to realize the customization of the keyboard including numbers, uppercase letters, lowercase letters, special characters four switching modes, and needs to realize random keyboard and non-random keyboard mode. You can determine the password strength and length based on the type of digits, uppercase letters, lowercase letters, and special characters. For password security, SM3 encryption is implemented for the output password. Implement keyboard types, including the following 6 types:
FBYCustomKeyBordType_NumWord,// numeric and alphanumeric keyboard
FBYCustomKeyBordType_WordNum,// Alphanumeric keypad FBYCustomKeyBordType_NumWordSymbol,// Alphanumeric keypad FBYCustomKeyBordType_WordNumSymbol,// Alphanumerical, punctuation keyboard FBYCustomKeyBordType_Num,// numeric keyboard FBYCustomKeyBordType_Word// alphabetical-only keyboardCopy the codeBasic keyboard screenshot below:
Realize keyboard view display type, including the following 5 types:
FBYCustomKeyBordShowType_Common, / / ordinary
FBYCustomKeyBordShowType_Text,// Text box FBYCustomKeyBordShowType_Pass,// password FBYCustomKeyBordShowType_PayPass,// pay password FBYCustomKeyBordShowType_NoTitle / / no titleCopy the codeKeyboard with text box:
Keypad with payment password bar:
To open the default browser and custom browser, the specific implementation roadmap is as follows:
-
Create the CustomKeyboard class to implement the RCTBridgeModule protocol
-
Add RCT_EXPORT_MODULE () macro
-
Add the React Native and controller
-
Declares methods called by JavaScript
-
Create a numeric keyboard FBYNumKeyBord class to achieve the corresponding view and functions
-
Create a new alphabetic keyboard FBYWordKeyBord class to achieve the corresponding view and functions
-
Create a numeric keyboard class FBYNumOnlyKeyBord to implement the corresponding view and functions
-
Create a new symbol keyboard class FBYSymbolKeyBord to implement the corresponding view and functions
-
Create a symbol keyboard FBYCustomKeyBord class to achieve keyboard type switch function
-
Determine the password strength and length based on the password
-
The SM3 encryption function is implemented for the output password
-
Invoke a custom keyboard based on pass-argument analysis
-
Javascript calls the browser method
Three: realize source code analysis
1. Create the CustomKeyboard class to implement the RCTBridgeModule protocol
Create a CustomKeyboard class that inherits NSObject and implements the RCTBridgeModule protocol
// CustomKeyboard.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <UIKit/UIKit.h>
@interface CustomKeyboard : NSObject<RCTBridgeModule>
@end
Copy the code2. Add the RCT_EXPORT_MODULE() macro
To implement the RCTBridgeModule protocol, the CustomKeyboard class needs to contain the RCT_EXPORT_MODULE() macro. Add a parameter “KeybordPlugin” to the macro to specify the name of the module to access in JavaScript. If you don’t specify it, the name of the Objective-C class is used by default. If the class name starts with RCT, the module name introduced by the JavaScript side automatically removes the prefix.
// CustomKeyboard.m
#import "CustomKeyboard.h"
@implementation CustomKeyboard
RCT_EXPORT_MODULE(KeybordPlugin);
@end
Copy the code3. Add the React Native and controller
If the React Native controller is not added, the view will not display properly.
// CustomKeyboard.m
#import "CustomKeyboard.h"
#import <React/RCTUtils.h>
@implementation CustomKeyboard
RCT_EXPORT_MODULE(KeybordPlugin);
@end
Copy the codeAfter introducing <React/ rctutils. h>, call the view as follows when it is initialized or displayed
UIViewController *vc = RCTPresentedViewController();
Copy the code4. Declare methods called by JavaScript
React Native needs to explicitly declare the methods to be exported to JavaScript, otherwise React Native won’t export any methods. The declaration is implemented via the RCT_EXPORT_METHOD() macro:
// CustomKeyboard.m #import "CustomKeyboard.h" #import <React/RCTUtils.h> @implementation CustomKeyboard RCT_EXPORT_MODULE(KeybordPlugin); RCT_EXPORT_METHOD(onKeyboard:(NSDictionary *)arguments :(RCTResponseSenderBlock)sucessCallback (RCTResponseSenderBlock)failCallback) {NSLog(@" call up native password keyboard method "); } @endCopy the code5. Create a numeric keypad class FBYNumKeyBord to implement corresponding views and functions
In the FBYNumKeyBord class of the numeric keyboard, the view contains the 0-9 numeric buttons, the ABC letter toggle button, the @%# special character toggle button, the undo delete button, the Finish button, and the cancel button. The corresponding button click function and the realization of random keyboard and non-random keyboard two modes. Effect:
The core code is as follows:
//FBYNumKeyBord.m - (void)setRandom:(BOOL)random{ _random = random; if (random) { NSMutableArray *newArray = [NSMutableArray arrayWithArray:self.numArray]; for(int i = 0; i< self.numArray.count; i++) { int m = (arc4random() % (self.numArray.count - i)) + i; [newArray exchangeObjectAtIndex:i withObjectAtIndex: m]; } self.numArray = newArray; for (UIButton *btn in self.subviews) { [btn removeFromSuperview]; } [self addControl]; }}Copy the code6. Create an alphabetic keyboard class FBYWordKeyBord to implement corresponding views and functions
In the numeric keypad class FBYWordKeyBord, the view contains 26 alphabetic buttons, a case toggle button, a 123 numeric keypad toggle button, a @%# special character toggle button, a back delete button, a Finish button, and a cancel button. The corresponding button click function and the realization of random keyboard and non-random keyboard two modes. Effect:
The core code is as follows:
//FBYWordKeyBord.m
for (int i = 0; i< 26; i++) {
FBYCustomKeyBordButton *btn = [FBYCustomKeyBordButton buttonWithTitle:self.wordArray[i] tag:i delegate:self];
[btn addTarget:self action:@selector(btnTouchDown:) forControlEvents:(UIControlEventTouchDown)];
[btn addTarget:self action:@selector(btnTouchCancel:) forControlEvents:(UIControlEventTouchUpInside)];
[btn addTarget:self action:@selector(btnTouchCancel:) forControlEvents:(UIControlEventTouchUpOutside)];
[btn addTarget:self action:@selector(btnTouchCancel:) forControlEvents:(UIControlEventTouchCancel)];
[btnArray addObject:btn];
[self addSubview:btn];
}
Copy the code7. Create the FBYNumOnlyKeyBord class to implement corresponding views and functions
In the numeric keypad class FBYNumOnlyKeyBord, the view contains the 0-9 numeric buttons, undo delete, finish, and cancel buttons. The corresponding button click function and the realization of random keyboard and non-random keyboard two modes. Effect:
The core code is as follows:
//FBYNumOnlyKeyBord.m for (int i=0; i<self.btnArray.count; i++) { UIButton *btn =self.btnArray[i]; if(i<9){ btn.frame = CGRectMake(btn.tag % 3 * (btnW ), btn.tag / 3 * (btnH ), btnW, btnH); }else if (i==9){ btn.frame = CGRectMake( 1 * (btnW ), 3* (btnH ), btnW, btnH); }else if (i==10){ btn.frame = CGRectMake( 0* (btnW ), 3* (btnH ) , btnW, btnH); }else if (i==11){ btn.frame = CGRectMake( 2* (btnW ), 3* (btnH ), btnW, btnH); }else if (i==12){ btn.frame = CGRectMake( 0* (btnW ), 3* (btnH ), btnW, btnH); }}Copy the code8. Create the FBYSymbolKeyBord class to implement the corresponding view and functions
In the numeric keypad FBYSymbolKeyBord class, the view contains 30 special character buttons, a 123 numeric keypad toggle button, an ABC toggle button, an undo delete button, a finish button, and a cancel button. The corresponding button click function and the realization of random keyboard and non-random keyboard two modes. Effect:
The core code is as follows:
//FBYSymbolKeyBord.m - (NSArray *)symbolArray{ if (! _symbolArray) { _symbolArray = @[@"*",@"/",@":",@";",@"(",@")",@"[",@"]",@"$",@"=",@"! , "@" ^ "@" & ", "@ %," @ "+" @ "-" @ "RMB" @ "?, "@" {} "@", "@" # "@" _ "@" \ \ "@" | "@" ~, "@" `, "@" ∑, "@" which, "@" £, "@". "] ; } return _symbolArray; } - (void)addControl{ NSMutableArray *btnArray = [NSMutableArray array]; for (int i = 0; i < 30; i++) { FBYCustomKeyBordButton *btn = [FBYCustomKeyBordButton buttonWithTitle:self.symbolArray[i] tag:i delegate:self]; [btn addTarget:self action:@selector(btnTouchDown:) forControlEvents:(UIControlEventTouchDown)]; [btn addTarget:self action:@selector(btnTouchCancel:) forControlEvents:(UIControlEventTouchUpInside)]; [btn addTarget:self action:@selector(btnTouchCancel:) forControlEvents:(UIControlEventTouchUpOutside)]; [btn addTarget:self action:@selector(btnTouchCancel:) forControlEvents:(UIControlEventTouchCancel)]; [self addSubview:btn]; [btnArray addObject:btn]; }}Copy the code9. Create the FBYCustomKeyBord class to switch the keyboard type
FBYCustomKeyBord class according to the parameters passed in JS keyboard call, to achieve what keyboard mode, keyboard type, a total of six types: numbers and letters, letters and numbers, numbers and letters special characters, letters and numbers special characters, only numbers, only letters. Keyboard view display type, including 5 types: normal, text box, password, payment password grid, no title. The core code is as follows:
-(void)setKeybordType:(FBYCustomKeyBordType)keybordType{ _keybordType=keybordType; [self.numPad removeFromSuperview]; if(_keybordType==FBYCustomKeyBordType_NumWord){ self.numPad.random=self.random; self.numPad.delegate=self; [self addSubview:self.numPad]; }else if(_keybordType==FBYCustomKeyBordType_WordNum){ self.wordPad.random=self.random; self.wordPad.delegate=self; [self addSubview:self.wordPad]; }else if(_keybordType==FBYCustomKeyBordType_Num){ self.numOnlyPad.random=self.random; self.numOnlyPad.delegate=self; [self addSubview:self.numOnlyPad]; }else if(_keybordType==FBYCustomKeyBordType_NumWordSymbol){ self.numPad.random=self.random; self.numPad.delegate=self; [self addSubview:self.numPad]; }else if(_keybordType==FBYCustomKeyBordType_Word){ self.wordPad.random=self.random; self.wordPad.delegate=self; [self addSubview:self.wordPad]; }else if (keybordType==FBYCustomKeyBordType_WordNumSymbol){ self.wordPad.random=self.random; self.wordPad.delegate=self; [self addSubview:self.wordPad]; }}Copy the code10. Determine the password strength and length based on the password
Get the length from the password string as follows:
-(NSUInteger)messageLength:(NSString *)message{NSString * MSG =[message copy]; NSUInteger length= msg.length; NSLog(@"%lu",(unsigned long)length); return length; }Copy the codeAccording to the password string message, through the regular check, determine the string contains several characters, and then determine the password strength. There are four states in total: digits, uppercase letters, lowercase letters, and special characters. Two states are weak, three states are medium, and four states are strong. The codes are as follows:
//FBYCustomKeyBord. M #pragma mark -(NSUInteger)messageStrength:(NSString *)message{NSString * MSG =[message copy]; NSUInteger length= msg.length; BOOL capitalBool = NO; BOOL lowercaseBool = NO; BOOL numberBool = NO; BOOL stringBool = NO; NSString* result1; NSString* result2; NSString* result3; NSString* result4; for (int i = 0; i < length; i++) { char commitChar = [msg characterAtIndex:i]; If ((commitChar>64)&&(commitChar<91)){NSLog(@" string with uppercase letters "); capitalBool = YES; }else if((commitChar>96)&&(commitChar<123)){NSLog(@);}else if(commitChar>96)&&(commitChar<123)){NSLog(@); lowercaseBool = YES; }else if((commitChar>47)&&(commitChar<58)){NSLog(@" string with number "); numberBool = YES; }else{NSLog(@" string with space "); stringBool = YES; } } result1 = [NSString stringWithFormat:@"%d",capitalBool]; result2 = [NSString stringWithFormat:@"%d",lowercaseBool]; result3 = [NSString stringWithFormat:@"%d",numberBool]; result4 = [NSString stringWithFormat:@"%d",stringBool]; NSMutableArray* resultArray = [[NSMutableArray alloc] init]; [resultArray addObject:[NSString stringWithFormat:@"%@",result1]]; [resultArray addObject:[NSString stringWithFormat:@"%@",result2]]; [resultArray addObject:[NSString stringWithFormat:@"%@",result3]]; [resultArray addObject:[NSString stringWithFormat:@"%@",result4]]; int intResult=0; for (int j=0; j<[resultArray count]; j++) { if ([[resultArray objectAtIndex:j] isEqualToString:@"1"]) { intResult++; } } NSUInteger result; if (intResult == 4){ result = 3; }else if (intResult == 3){ result = 2; }else if (intResult == 2){ result = 1; }else{ result = 0; } return result; }Copy the code11. Encrypt the output password SM3
Here the password encryption is SM3 encryption, the code is as follows:
#pragma mark -(NSString *)encryptMessage:(NSString *)message{NSString * MSG =[message copy]; return [self sm3:msg]; } #pragma mark - (NSString *) sm3:(NSString *) input {NSData *inputData = [input dataUsingEncoding:NSUTF8StringEncoding]; NSData *outputData = [CustomKBSM3Coded sm3_hashWithPainData:inputData]; //NSString *outputString = [GTMBase64 stringByEncodingData:outputData]; NSString *outputString = [self convertDataToHexStr:outputData]; NSString *upper = [outputString uppercaseString]; return upper; }Copy the code12. Open the browser based on the parameters
This browser plug-in supports opening custom browsers and default browsers. To specify which method to open the browser, JavaScript needs to be passed in the form of fields via the Arguments dictionary. OpenType fields are used here.
// CustomKeyboard.m #import "CustomKeyboard.h" #import <React/RCTUtils.h> @interface CustomKeyboard ()<FBYCustomKeyBordDelegate> @property(strong,nonatomic)RCTResponseSenderBlock sucessCallback; @property(strong,nonatomic)RCTResponseSenderBlock failCallback; @property (nonatomic, strong) FBYCustomKeyBord *keyBoard; @property(assign,nonatomic)FBYCustomKeyBordType keybordType; @property(assign,nonatomic)FBYCustomKeyBordShowType keybordShowType; @property(strong,nonatomic)NSString *tag; @property(strong,nonatomic)NSString *isUp; @end @implementation CustomKeyboard RCT_EXPORT_MODULE(KeybordPlugin); RCT_EXPORT_METHOD(open:(NSDictionary *)arguments withCompletionHandler:(RCTResponseSenderBlock)completion failureHandler:(RCTResponseSenderBlock)failure) { dispatch_async(dispatch_get_main_queue(), ^{ self.keyBoard = [FBYCustomKeyBord instance]; self.keyBoard.delegate = self; self.sucessCallback = sucessCallback; self.failCallback = failCallback; NSString *isUp=@"1"; NSString *isRandom=@"0"; NSString *type=@"4"; NSString *showType=@"0"; NSString *isEncrypt=@"0"; Self.keyboard. Random = YES; self.keybordType = FBYCustomKeyBordType_Num; self.keybordShowType = FBYCustomKeyBordShowType_Common; self.keyBoard.keybordType = self.keybordType; / / pop-up keyBoard or pack up the self. The rid_device_info_keyboard. KeybordShowType = self. KeybordShowType; dispatch_async(dispatch_get_main_queue(), ^{ if ((isUp==nil) || isUp.intValue == 1) { [self.keyBoard popKeyBordInParent:RCTPresentedViewController()]; } else { [self.keyBoard disappearSwitchBtnClickWithBlock:^{ Self. SucessCallback (@ [@ {SucessReslutCode: @ "1", SucessData: @ "ok"}]); NSLog (@ "success profile password keyboard method");}]; }}); }); } // keyboard data callback -(void)customKeybord:(FBYCustomKeyBord *)keybord didReturnMessage:(NSString *)message withLength:(NSUInteger)length withStrength:(NSUInteger)strength{ if(self.tag == nil){ self.tag = [CustomKeyboard getSecondTimeStringSince1970]; } if (! [self.isUp isEqualToString:@"0"]) { self.sucessCallback(@[@{SucessReslutCode:@"1",SucessData:@{@"pwdLength":[NSString stringWithFormat:@"%lu",(unsigned long)length],@"pwdStrong":[NSString stringWithFormat:@"%lu",strength],@"pwdValue":message}}]); NSLog(@" successfully invoked password keypad method "); }}Copy the code13. Javascript calls the browser method
Now you can call this method from Javascript like this:
import { NativeModules } from "react-native";
const CustomkeyBoardPlugin = NativeModules.KeybordPlugin;
CustomkeyBoardPlugin.onKeyboard({isRandom:"1",isUp:"1",type:"4",showType:"3"},(msg) => {
Alert.alert(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});
Copy the codeHope to help you, if you have questions can add QQ technical exchange group: 668562416
If there is anything wrong or inadequate place, but also look for readers to make suggestions or suggestions
If you need to reprint, please contact me, after authorization can be reprinted, thank you
This post has been synchronized to my blog: FBY Zhan Fei