React 实现车牌键盘的示例代码

vehicle-plate-keyboard

React 实现的车牌键盘。

https://github.com/LiuuY/vehicle-plate-keyboard

💡 Features

省份 + 字母/数字 + '港澳学警领'

新能源车牌

自动判断当前位置可输入字符类型

🚗 Demo

Demo

📷 Screenshots

📦 Installation

yarn add vehicle-plate-keyboard

🔨 Usage

import LicenseKeyboard from 'vehicle-plate-keyboard';
import 'vehicle-plate-keyboard/dist/main.css';

...

<LicenseKeyboard
  visible={state.showKeyboard}
  onChange={value => setState({ value })}
  value={state.value}
  done={() => setState({ showKeyboard: false })}
/>

API

props type description
visiable boolean keyboard visible
onChange (value: string) => void trigger when user tap
value string controlled value
done () => void trigger when keyborad dismiss
confirmButtonStyle React.CSSProperties confirm button style
confirmButtonText string confirm button text
cellTextStyle React.CSSProperties keycell style
safeArea boolean show safearea

📝 License

MIT License

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解React-Native解决键盘遮挡问题（Keyboard遮挡问题）

    详解React-Native解决键盘遮挡问题（Keyboard遮挡问题）

    本文介绍了React-Native键盘遮挡问题,分享给大家 在开发中经常遇到需要输入的地方,RN给我们提过的TextInput虽然好用,可惜并没有处理遮挡问题. 很多时候键盘弹出来都会遮挡住编辑框,让人很头疼. 本来想在js.coach 库里面找一找第三方的插件,看到最好的一个就是React-native-keyboard-spacer了,然而我们还差一个东西,那就是获取键盘的高度. 这个我也查了半天并没有提供,获取没找到吧.于是只好自己写原生模块去获取键盘的高度了. 关于原生iOS获取键盘高度

  • ReactNative之键盘Keyboard的弹出与消失示例

    在开发中经常遇到需要输入的地方,所以就学习了一下ReactNative键盘Keyboard的弹出与消失的方法,留个笔记. 今天我们来说下RN对键盘事件的支持. 在React-native 的Component组件中有个Keyboard. github地址如下:https://github.com/facebook/react-native/tree/770091f3c13f7c1bd77c50f979d89a774001fbf0/Libraries/Components/Keyboard 我们先

  • react在安卓中输入框被手机键盘遮挡问题的解决方法

    react在安卓中输入框被手机键盘遮挡问题的解决方法

    前言 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 本文主要介绍了关于react在安卓输入框被键盘遮挡的相关内容,分享出来动大家参考学习,下面话不多说了,来一起看看详细的介绍吧 问题概述 今天遇到了一个问题,在安卓手机上,当我要点击输入"店铺名称"时,手机软键盘弹出来刚好把输入框挡住了:挡住就算了,

  • 解决react-native软键盘弹出挡住输入框的问题

    解决react-native软键盘弹出挡住输入框的问题

    这是效果: 代码: import React, {Component} from 'react'; import { View, Text, Button, StyleSheet, TextInput, ScrollView, KeyboardAvoidingView, Dimensions } from 'react-native'; import { StackActions, NavigationActions, withNavigation } from 'react-navigatio

  • React 实现车牌键盘的示例代码

    vehicle-plate-keyboard React 实现的车牌键盘. https://github.com/LiuuY/vehicle-plate-keyboard

  • React+EggJs实现断点续传的示例代码

    技术栈 前端用了React,后端则是EggJs,都用了TypeScript编写. 断点续传实现原理 断点续传就是在上传一个文件的时候可以暂停掉上传中的文件,然后恢复上传时不需要重新上传整个文件. 该功能实现流程是先把上传的文件进行切割,然后把切割之后的文件块发送到服务端,发送完毕之后通知服务端组合文件块. 其中暂停上传功能就是前端取消掉文件块的上传请求,恢复上传则是把未上传的文件块重新上传.需要前后端配合完成. 前端实现 前端主要分为:切割文件.获取文件MD5值.上传切割后的文件块.合并文件.暂

  • react实现Radio组件的示例代码

    react实现Radio组件的示例代码

    本文旨在用最清楚的结构去实现一些组件的基本功能.希望和大家一起学习,共同进步 效果展示: 测试组件: class Test extends Component { constructor(props) { super(props) this.state = { active:1 } } onGroupChange(value) { this.setState({ active: value }) } render() { return ( <div> <RadioGroup onChan

  • React中前端路由的示例代码

    React中前端路由的示例代码

    目录 一. url是什么 二. 使用步骤 一. url是什么 访问不同url, 展示不同的组件 二. 使用步骤 安装React路由:命令行中执行npm install react-router-dom --save(注意此处的版本为npm install react-router-dom@4.3.1 --save) 两个js文件,分别为list.js和newButton.js,要实现访问localhost:3000/button的时候就显示button.js:访问localhost:3000/l

  • 30行代码实现React双向绑定hook的示例代码

    目录 使用Proxy代理数据 使用useRef创建同一份数据引用 添加更新handler 去除多次Proxy 添加缓存完善代码 总结 Sandbox 示例 Vue和MobX中的数据可响应给我们留下了深刻的印象,在React函数组件中我们也可以依赖hooks来实现一个简易好用的useReactive. 看一下我们的目标 const CountDemo = () => { const reactive = useReactive({ count: 0, }); return ( <div onCl

  • 利用React实现虚拟列表的示例代码

    利用React实现虚拟列表的示例代码

    目录 列表项高度固定 代码实现 列表项高度动态 代码实现 思路说明 一些需要注意的问题 结尾 大家好,我是前端西瓜哥.这次我们来看看虚拟列表是什么玩意,并用 React 来实现两种虚拟列表组件. 虚拟列表,其实就是将一个原本需要全部列表项的渲染的长列表,改为只渲染可视区域内的列表项,但滚动效果还是要和渲染所有列表项的长列表一样. 虚拟列表解决的长列表渲染大量节点导致的性能问题: 一次性渲染大量节点,会占用大量 GPU 资源,导致卡顿: 即使渲染好了,大量的节点也持续占用内存.列表项下的节点越多,

  • 利用JavaScript实现创建虚拟键盘的示例代码

    利用JavaScript实现创建虚拟键盘的示例代码

    目录 前言 项目基本结构 JavaScript 虚拟键盘的显示 虚拟键盘的按钮 CSS的键盘按钮设计 使用 JavaScript 激活虚拟键盘 前言 在线演示地址 项目基本结构 目录结构如下: 这是一个简单的 JavaScript 教程,教你如何创建JavaScript 虚拟键盘.虚拟键盘是一种屏幕输入法,如果你使用的是 Windows 操作系统,我相信你应该也使用过 Windows 中的默认虚拟键盘. 首先,我创建了一个可以看到输入字符的结果框,也就是我们可以在其中看到所有信息的显示器.此虚拟

  • Python+Tensorflow+CNN实现车牌识别的示例代码

    一.项目概述 本次项目目标是实现对自动生成的带有各种噪声的车牌识别.在噪声干扰情况下,车牌字符分割较困难,此次车牌识别是将车牌7个字符同时训练,字符包括31个省份简称.10个阿拉伯数字.24个英文字母('O'和'I'除外),共有65个类别,7个字符使用单独的loss函数进行训练. (运行环境:tensorflow1.14.0-GPU版) 二.生成车牌数据集 import os import cv2 as cv import numpy as np from math import * from

  • React Native 集成jpush-react-native的示例代码

    React Native 集成jpush-react-native的示例代码

    jpush-React-native是极光推送官方维护的一个插件,github地址:https://github.com/jpush/jpush-react-native 一.手动配置 1.集成插件到项目中 npm install jpush-react-native --save rnpm link jpush-react-native Android 使用 android Studio import 你的 react Native 应用(选择你的 React Native 应用所在目录下的

  • python实现车牌识别的示例代码

    某天回家之时,听到有个朋友说起他正在做一个车牌识别的项目 于是对其定位车牌的位置算法颇有兴趣,今日有空得以研究,事实上车牌识别算是比较成熟的技术了, 这里我只是简单实现. 我的思路为: 对图片进行一些预处理,包括灰度化.高斯平滑.中值滤波.Sobel算子边缘检测等等. 利用OpenCV对预处理后的图像进行轮廓查找,然后根据一些参数判断该轮廓是否为车牌轮廓. 效果如下: test1: test2 实现代码如下(对图像预处理(滤波器等)的原理比较简单,这里只是对一些函数进行调包): import c

随机推荐