{"id":13989680,"url":"https://github.com/shixiaoquan/react-native-sms-verifycode","last_synced_at":"2025-06-11T08:13:38.582Z","repository":{"id":44176529,"uuid":"126114194","full_name":"shixiaoquan/react-native-sms-verifycode","owner":"shixiaoquan","description":"A React Native component for filling in SMS verification codes or passwords, for android and iOS","archived":false,"fork":false,"pushed_at":"2023-01-04T00:57:49.000Z","size":27094,"stargazers_count":132,"open_issues_count":33,"forks_count":36,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-29T08:39:25.558Z","etag":null,"topics":["react-native","sms","verifycode"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shixiaoquan.png","metadata":{"files":{"readme":"README-zh.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-21T02:52:06.000Z","updated_at":"2024-11-11T06:44:05.000Z","dependencies_parsed_at":"2023-02-01T16:45:46.736Z","dependency_job_id":null,"html_url":"https://github.com/shixiaoquan/react-native-sms-verifycode","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shixiaoquan%2Freact-native-sms-verifycode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shixiaoquan%2Freact-native-sms-verifycode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shixiaoquan%2Freact-native-sms-verifycode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shixiaoquan%2Freact-native-sms-verifycode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shixiaoquan","download_url":"https://codeload.github.com/shixiaoquan/react-native-sms-verifycode/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shixiaoquan%2Freact-native-sms-verifycode/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259227959,"owners_count":22824907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","sms","verifycode"],"created_at":"2024-08-09T13:01:57.072Z","updated_at":"2025-06-11T08:13:38.549Z","avatar_url":"https://github.com/shixiaoquan.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"### [Englsih Version](https://github.com/shixiaoquan/react-native-sms-verifycode/blob/develop/README.md)\n## 效果图\n\n### 支持输入密码，兼容了 iOS 和 Android\n\n|![android](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/react-native-sms-verifycode-android.gif)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/react-native-sms-verifycode-ios.gif)|![Password](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/react-native-sms-verifycode-password.gif)|\n|:-:|:-:|:-:|\n| on Android | on iOS | use Password |\n\n在线Demo查看地址 [Expo](https://snack.expo.io/@shixiaoquan/-react-native-sms-verifycode-example)\n\n## 整体的思路大概是这样的，上个优秀的手绘图 🙈 🙈 🙈\n![design](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/design.png)\n\n## 安装\n\n```bash\n$ npm install react-native-sms-verifycode --save\n```\n\n## 用法\n\n### 基本用法\n\n设置输入完成时的回调函数，即可获取用户输入的内容\n\n```javascript\nimport SMSVerifyCode from 'react-native-sms-verifycode'\n...\n\u003cSMSVerifyCode\n  ref={ref =\u003e (this.verifycode = ref)}\n  onInputCompleted={this.onInputCompleted}\n  containerPaddingHorizontal={30}\n/\u003e\n\nonInputCompleted = (text) =\u003e {\n\tAlert.alert(\n\t  text,\n\t  '本次输入的验证码',\n\t  [\n\t  \t{\n\t      text: '确定',\n\t    },\n\t  ]\n\t)\n}\n\nreset = () =\u003e {\n\tthis.verifycode.reset()\n\tthis.setState({codeText: ''})\n}\n...        \n```\n\n|![android](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/normal-android.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/normal-ios.png)|![all](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/normal-all.gif)|\n|:-:|:-:|:-:|\n\n### 高级用法\n\n#### 设置验证码的个数\n\n```javascript\nimport SMSVerifyCode from 'react-native-sms-verifycode'\n...\n\u003cSMSVerifyCode\n  initialCodes={4} // 根据需要设置任意数，类型必须时number\n/\u003e\n```\n\n|![android](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-number-4.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-number-5.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-number-6.png)|\n|:-:|:-:|:-:|\n\n#### 设置Container样式\n\n```javascript\nimport SMSVerifyCode from 'react-native-sms-verifycode'\n...\n\u003cSMSVerifyCode\n  verifyCodeLength={5}\n  containerPaddingVertical={10}\n  containerPaddingHorizontal={50}\n  containerBackgroundColor={'#8DC647'}\n/\u003e\n...        \n```\n\n|![android](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-container-3.png)|![android](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-container-1.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-container-2.png)|\n|:-:|:-:|:-:|\n\n#### 设置文本框的样式\n\n```javascript\nimport SMSVerifyCode from 'react-native-sms-verifycode'\n...\n\u003cSMSVerifyCode\n  verifyCodeLength={6}\n  containerPaddingVertical={10}\n  containerPaddingHorizontal={50}\n  containerBackgroundColor=\"#8DC647\"\n  codeViewBorderColor=\"#000000\"\n  focusedCodeViewBorderColor=\"#0000FF\"\n  codeViewBorderWidth={3}\n  codeViewBorderRadius={16}\n/\u003e\n...        \n```\n\n|![android](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-border-1.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-border-3.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-border-2.png)|\n|:-:|:-:|:-:|\n\n#### 设置文本的样式\n\n```javascript\nimport SMSVerifyCode from 'react-native-sms-verifycode'\n...\n\u003cSMSVerifyCode\n  verifyCodeLength={5}\n  codeFontSize={26}\n  // codeColor={'#89C047'}\n/\u003e\n...        \n```\n\n|![android](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-textstyle-1.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-textstyle-2.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-textstyle-3.png)|\n|:-:|:-:|:-:|\n\n## **可设置的属性**\n\n| Prop | PropType | Default Value |isRequired| Description |\n|:-:|:-:|:-:|:-:|:-:|\n| autoFocus | bool | false | NO | 默认是否自动获取焦点 |\n| verifyCodeLength | number | 6 | NO | 验证码的个数 |\n| initialCodes | array | 6 | NO | 初始值，默认为空，若设置，则自动填充 |\n| containerStyle | object | null | NO | 设置container的样式，改属性设置的级别低于后面3个，如果重复会被覆盖，该样式和 View 支持的样式一样 |\n| containerPaddingVertical | number | 0 | NO | 外层容器的paddingVertical |\n| containerPaddingLeft | number | 0 | NO | 外层容器的paddingLeft |\n| containerPaddingRight | number | 0 | NO | 外层容器的paddingRight |\n| containerPaddingHorizontal | number | 根据验证码个数自动计算 | NO | 外层容器的paddingHorizontal |\n| containerPaddingLeft | number | 0 | NO | 外层容器的paddingLeft |\n| containerPaddingRight | number | 0 | NO | 外层容器的paddingRight |\n| containerBackgroundColor | string | #FDFFFD | NO | 外层容器的backgroundColor |\n| codeViewStyle | object | null | NO | 设置数字\b框的样式，(等同于 View 的样式设置，本质上是个 View) |\n| codeViewWidth | number | 根据验证码个数自动计算 | NO | 文本框的宽度 |\n| codeViewBorderColor | string | grey | NO | 文本框的颜色 |\n| focusedCodeViewBorderColor | string | #1192F6 | NO | 当前获得焦点的文本框的颜色 |\n| codeViewBorderWidth | number | 1 | NO | 文本框的粗细 |\n| codeViewBorderRadius | number | 5 | NO | 文本框的圆角大小 |\n| codeViewBackgroundColor | string | default | NO | 设置数字框的背景色 |\n| codeFontSize | number | default | NO | 文本的大小 |\n| codeColor | string | #222222 | NO | 文本的颜色 |\n| secureTextEntry | boolean | false | NO | 默认为false，需要设置为true时，只要secureTextEntry即可，不需要secureTextEntry={true} |\n| coverStyle | object | null | NO | 遮挡层的样式，(等同于 View 的样式设置，本质上是个 View) |\n| coverRadius | number | codeFontSize / 2 | NO | 遮挡层的半径，默认是个圆点（只在 secureTextEntry 为 true 时生效） |\n| coverColor | string | black | NO | 遮挡层的颜色，（只在 secureTextEntry 为 true 时生效） |\n| warningTitle | string | black | NO | 输入内容非数字时的，提示框的标题 |\n| warningContent | string | black | NO | 输入内容非数字时的，提示框的正文内容 |\n| warningButtonText | string | black | NO | 输入内容非数字时的，提示框的按钮文本 |\n\n## **可调用的方法**\n\n| Name | isRequired | Description |\n|:-:|:-:|:-:|\n| onInputChangeText | NO | 输入框中文本发生变化时，该方法被调用，会返回最新的值 |\n| onInputCompleted | NO | 输入完成时，回调的方法 |\n| reset | NO | 清空输入的内容，并将焦点设置在第一个输入框，**使用ref调用** |\n| blur | NO | 隐藏键盘，**使用ref调用** |\n| focus | NO | 显示键盘，**使用ref调用** |\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshixiaoquan%2Freact-native-sms-verifycode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshixiaoquan%2Freact-native-sms-verifycode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshixiaoquan%2Freact-native-sms-verifycode/lists"}