README-zh.md

Englsih Version

效果图

支持输入密码，兼容了 iOS 和 Android

on Android	on iOS	use Password

在线Demo查看地址 Expo

整体的思路大概是这样的，上个优秀的手绘图 🙈 🙈 🙈

安装

$ npm install react-native-sms-verifycode --save

用法

基本用法

设置输入完成时的回调函数，即可获取用户输入的内容

import SMSVerifyCode from 'react-native-sms-verifycode'
...
<SMSVerifyCode
  ref={ref => (this.verifycode = ref)}
  onInputCompleted={this.onInputCompleted}
  containerPaddingHorizontal={30}
/>

onInputCompleted = (text) => {
	Alert.alert(
	  text,
	  '本次输入的验证码',
	  [
	  	{
	      text: '确定',
	    },
	  ]
	)
}

reset = () => {
	this.verifycode.reset()
	this.setState({codeText: ''})
}
...        

高级用法

设置验证码的个数

import SMSVerifyCode from 'react-native-sms-verifycode'
...
<SMSVerifyCode
  initialCodes={4} // 根据需要设置任意数，类型必须时number
/>

设置Container样式

import SMSVerifyCode from 'react-native-sms-verifycode'
...
<SMSVerifyCode
  verifyCodeLength={5}
  containerPaddingVertical={10}
  containerPaddingHorizontal={50}
  containerBackgroundColor={'#8DC647'}
/>
...        

设置文本框的样式

import SMSVerifyCode from 'react-native-sms-verifycode'
...
<SMSVerifyCode
  verifyCodeLength={6}
  containerPaddingVertical={10}
  containerPaddingHorizontal={50}
  containerBackgroundColor="#8DC647"
  codeViewBorderColor="#000000"
  focusedCodeViewBorderColor="#0000FF"
  codeViewBorderWidth={3}
  codeViewBorderRadius={16}
/>
...        

设置文本的样式

import SMSVerifyCode from 'react-native-sms-verifycode'
...
<SMSVerifyCode
  verifyCodeLength={5}
  codeFontSize={26}
  // codeColor={'#89C047'}
/>
...        

可设置的属性

Prop	PropType	Default Value	isRequired	Description
autoFocus	bool	false	NO	默认是否自动获取焦点
verifyCodeLength	number	6	NO	验证码的个数
initialCodes	array	6	NO	初始值，默认为空，若设置，则自动填充
containerStyle	object	null	NO	设置container的样式，改属性设置的级别低于后面3个，如果重复会被覆盖，该样式和 View 支持的样式一样
containerPaddingVertical	number	0	NO	外层容器的paddingVertical
containerPaddingLeft	number	0	NO	外层容器的paddingLeft
containerPaddingRight	number	0	NO	外层容器的paddingRight
containerPaddingHorizontal	number	根据验证码个数自动计算	NO	外层容器的paddingHorizontal
containerPaddingLeft	number	0	NO	外层容器的paddingLeft
containerPaddingRight	number	0	NO	外层容器的paddingRight
containerBackgroundColor	string	#FDFFFD	NO	外层容器的backgroundColor
codeViewStyle	object	null	NO	设置数字�框的样式，(等同于 View 的样式设置，本质上是个 View)
codeViewWidth	number	根据验证码个数自动计算	NO	文本框的宽度
codeViewBorderColor	string	grey	NO	文本框的颜色
focusedCodeViewBorderColor	string	#1192F6	NO	当前获得焦点的文本框的颜色
codeViewBorderWidth	number	1	NO	文本框的粗细
codeViewBorderRadius	number	5	NO	文本框的圆角大小
codeViewBackgroundColor	string	default	NO	设置数字框的背景色
codeFontSize	number	default	NO	文本的大小
codeColor	string	#222222	NO	文本的颜色
secureTextEntry	boolean	false	NO	默认为false，需要设置为true时，只要secureTextEntry即可，不需要secureTextEntry={true}
coverStyle	object	null	NO	遮挡层的样式，(等同于 View 的样式设置，本质上是个 View)
coverRadius	number	codeFontSize / 2	NO	遮挡层的半径，默认是个圆点（只在 secureTextEntry 为 true 时生效）
coverColor	string	black	NO	遮挡层的颜色，（只在 secureTextEntry 为 true 时生效）
warningTitle	string	black	NO	输入内容非数字时的，提示框的标题
warningContent	string	black	NO	输入内容非数字时的，提示框的正文内容
warningButtonText	string	black	NO	输入内容非数字时的，提示框的按钮文本

可调用的方法

Name	isRequired	Description
onInputChangeText	NO	输入框中文本发生变化时，该方法被调用，会返回最新的值
onInputCompleted	NO	输入完成时，回调的方法
reset	NO	清空输入的内容，并将焦点设置在第一个输入框，使用ref调用
blur	NO	隐藏键盘，使用ref调用
focus	NO	显示键盘，使用ref调用