ReactNative自定义车牌号输入框及键盘实现

项目背景

目前使用ReactNative技术重构公司的原生Android应用,很多场景是和公司的需求密切相关的,开发中也遇到不少问题。

比如项目中使用的即时聊天解决方案是采用融云,推送采用的是个推方案。

原生方面有融云提供的一整套解决方案,包括功能和UI,相对来说,只要进行集成就能轻松添加功能,但对于跨平台方案就需要自定义uI了,我的另一篇推文中也提到了这个问题。

项目遇到了一个修改车牌号的功能,而且功能的样式及UI功能要与产品要求及设计符合,参考了一下安卓同事的成品设计,想到以后需要进行跨平台及兼容性的问题,从代码的维护性方面,决定采用纯js的方式,并参考了其他大佬的解决方案,最终实现了如下的UI及功能实现。

项目中用到了自定义的车牌号及键盘,按照公司需求做了部分优化处理,现在做个记录,页面展示及效果如下:

动态使用效果,b站视频

github地址:https://github.com/wayne214/VehicleTextInput

推荐阅读:

ReactNative集成个推消息推送

--- End ---

君伟说

本文分享自微信公众号 - 君伟说(wayne90214)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

2020年前端实用代码段,为你的工作保驾护航

有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )

前端性能优化 - 雅虎军规

无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢?可以遵循雅虎的前端优化35条军规,这样对于优化有一个比较清晰的方向.35条军规1.尽量减少HTTP请求个数——须权衡2.使用CDN(内容分发网络)3.为文件头指定Expires或CacheControl,使内容具有缓存性。4.避免空的