博客> iOS--React Native密码键盘插件
iOS--React Native密码键盘插件
2019-09-17 04:51 评论:0 阅读:278 FBY展菲
ios React Native 密码键盘

一:介绍

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

在React Native移动平台项目开发中,除了React Native 提供的封装好的部分插件和原声组建外,在实际的项目中还需要使用到很多其他的插件,比如网络请求、数据库、相机、相册、通讯录、视频播放器、浏览器、蓝牙连接、图片处理、消息推送、地图、统计、埋点等等APP开发中需要用到的功能,都为IDE开发平台提供封装好的插件,以便项目开发使用。

另外,这些博文都是来源于我日常开发中的技术总结,在时间允许的情况下,我会针对技术点分别分享iOS、Android两个版本,如果有其他技术点需要,可在文章后留言,我会尽全力帮助大家。这篇文章重点介绍原生密码键盘插件的开发与使用

二:实现思路分析

原生密码键盘插件是需要实现自定以键盘包含数字、大写字母、小写字母、特殊字符四种切换方式,并且需要实现随机键盘和非随机键盘模式。 实现根据密码包含数字、大写字母、小写字母、特殊字符种类判断密码强度和长度。 为了密码的安全考虑,实现对输出密码进行SM3加密。 实现键盘类型,其中包括以下6种类型:

FBYCustomKeyBordType_NumWord,//数字及字母键盘 FBYCustomKeyBordType_WordNum,//字母及数字键盘 FBYCustomKeyBordType_NumWordSymbol,//数字及字母,标点键盘 FBYCustomKeyBordType_WordNumSymbol,//字母及数字,标点键盘 FBYCustomKeyBordType_Num,//仅数字键盘 FBYCustomKeyBordType_Word//仅字母键盘

基本键盘截图如下: 66.png

实现键盘视图显示类型,其中包括以下5种类型:

FBYCustomKeyBordShowType_Common,//普通 FBYCustomKeyBordShowType_Text,//文本框 FBYCustomKeyBordShowType_Pass,//密码 FBYCustomKeyBordShowType_PayPass,//支付密码格 FBYCustomKeyBordShowType_NoTitle//无标题

带有文本框的键盘: 88.png

有支付密码格的键盘: 99.png

打开默认浏览器和打开自定义浏览器,具体的实现思路如下:

  1. 新建CustomKeyboard类,实现RCTBridgeModule协议

  2. 添加RCT_EXPORT_MODULE()宏

  3. 添加React Native跟控制器

  4. 声明被JavaScript 调用的方法

  5. 新建数字键盘FBYNumKeyBord类,实现相应视图及功能

  6. 新建字母键盘FBYWordKeyBord类,实现相应视图及功能

  7. 新建纯数字键盘FBYNumOnlyKeyBord类,实现相应视图及功能

  8. 新建符号键盘FBYSymbolKeyBord类,实现相应视图及功能

  9. 新建符号键盘FBYCustomKeyBord类,实现键盘类型切换功能

  10. 实现根据密码判断密码强度和长度功能

  11. 实现输出密码SM3加密功能

  12. 根据传参分析调用自定义键盘

  13. Javascript调用浏览器方法

三:实现源码分析

1. 新建CustomKeyboard类,实现RCTBridgeModule协议

新建继承NSObject的CustomKeyboard类,并实现RCTBridgeModule协议

// CustomKeyboard.h
#import <Foundation>
#import <React>
#import <UIKit>
@interface CustomKeyboard : NSObject<RCTBridgeModule>
@end
2. 添加RCT_EXPORT_MODULE()宏

为了实现RCTBridgeModule协议,CustomKeyboard的类需要包含RCT_EXPORT_MODULE()宏。 并在这个宏里面添加一个参数“KeybordPlugin”用来指定在 JavaScript 中访问这个模块的名字。 如果你不指定,默认就会使用这个 Objective-C 类的名字。 如果类名以 RCT 开头,则 JavaScript 端引入的模块名会自动移除这个前缀。

// CustomKeyboard.m
#import "CustomKeyboard.h"
@implementation CustomKeyboard
RCT_EXPORT_MODULE(KeybordPlugin);
@end
3. 添加React Native跟控制器

如果不添加React Native跟控制器,view将不能正常显示出来,实现方法如下:

// CustomKeyboard.m
#import "CustomKeyboard.h"
#import <React>
@implementation CustomKeyboard
RCT_EXPORT_MODULE(KeybordPlugin);
@end

引入之后,在视图初始化或者显示的时候,按照如下方法调用即可

UIViewController *vc = RCTPresentedViewController();
4. 声明被JavaScript 调用的方法

React Native需要明确的声明要给 JavaScript 导出的方法,否则 React Native 不会导出任何方法。声明通过RCT_EXPORT_METHOD()宏来实现:

// CustomKeyboard.m
#import "CustomKeyboard.h"
#import <React>
@implementation CustomKeyboard
RCT_EXPORT_MODULE(KeybordPlugin);
RCT_EXPORT_METHOD(onKeyboard:(NSDictionary *)arguments
                  :(RCTResponseSenderBlock)sucessCallback
                  :(RCTResponseSenderBlock)failCallback)
{
    NSLog(@"调起原生密码键盘方法");
}
@end
5. 新建数字键盘FBYNumKeyBord类,实现相应视图及功能

在数字键盘FBYNumKeyBord类中,视图包含0-9数字按钮、ABC字母切换按钮、@%#特殊字符切换按钮、回删按钮、完成按钮和取消按钮。 实现相应按钮的点击功能以及实现随机键盘和非随机键盘两种模式。 效果图:

number.png

核心代码如下:

//FBYNumKeyBord.m
- (void)setRandom:(BOOL)random{
    _random = random;
    if (random) {
        NSMutableArray *newArray = [NSMutableArray arrayWithArray:self.numArray];
        for(int i = 0; i< self xss=removed xss=removed xss=removed xss=removed i=0;i btn =self.btnArray[i]; xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed keybordType=keybordType; xss=removed self.numPad.random=self.random; self.numPad.delegate=self; xss=removed self.wordPad.random=self.random; self.wordPad.delegate=self; xss=removed self.numOnlyPad.random=self.random; self.numOnlyPad.delegate=self; xss=removed self.numPad.random=self.random; self.numPad.delegate=self; xss=removed self.wordPad.random=self.random; self.wordPad.delegate=self; xss=removed self.wordPad.random=self.random; self.wordPad.delegate=self; msg=[message xss=removed msg=[message xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed>64)&&(commitChar<91 xss=removed>96)&&(commitChar<123 xss=removed>47)&&(commitChar<58 xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed intResult=0; j=0; xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed msg=[message xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed isUp=@ isRandom=@ type=@ showType=@ isEncrypt=@ xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed> {
                                         Alert.alert&#40;JSON.stringify(msg&#41;);
                                         },(err) => {
                                         Alert.alert&#40;JSON.stringify(err&#41;);
                                         });

源码Demo获取方法

如果需要React Native密码键盘插件源码demo,欢迎关注 【网罗开发】微信公众号,回复【62】便可领取。 网罗天下方法,方便你我开发,所有文档会持续更新,欢迎关注一起成长!

希望可以帮助大家,如有问题可加QQ技术交流群: 668562416

如果哪里有什么不对或者不足的地方,还望读者多多提意见或建议

如需转载请联系我,经过授权方可转载,谢谢


 网络开发.jpg

收藏
0
sina weixin mail 回到顶部