Support for entering passwords, compatible with iOS and Android
 |
 |
 |
| on Android |
on iOS |
use Password |
The design idea is probably like this, showing an excellent hand drawing 🙈 🙈 🙈
$ npm install react-native-sms-verifycode --save
Set the callback function when the input is complete, you can get the content input by the user.
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: ''})
}
... Set the length of the verification code
import SMSVerifyCode from 'react-native-sms-verifycode'
...
<SMSVerifyCode
verifyCodeLength={4} // Set any number as needed, type must be number
/>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 |
Whether to automatically get the focus by default |
| verifyCodeLength |
number |
6 |
NO |
length of the verification code |
| initialCodes |
array |
6 |
NO |
The default is empty, if set, it will be automatically populated |
| containerStyle |
object |
null |
NO |
set container style |
| containerPaddingVertical |
number |
0 |
NO |
container's paddingVertical |
| containerPaddingLeft |
number |
0 |
NO |
set container paddingLeft |
| containerPaddingRight |
number |
0 |
NO |
set container paddingRight |
| containerPaddingHorizontal |
number |
Automatic calculation based on the length of the verification code |
NO |
container's paddingHorizontal |
| containerPaddingLeft |
number |
0 |
NO |
set container paddingLeft |
| containerPaddingRight |
number |
0 |
NO |
set container paddingRight |
| containerBackgroundColor |
string |
#FDFFFD |
NO |
container's backgroundColor |
| codeViewStyle |
object |
null |
NO |
set code view style |
| codeViewWidth |
number |
Automatic calculation based on the length of the verification code |
NO |
width of code view |
| codeViewBorderColor |
string |
grey |
NO |
color of code view border |
| focusedCodeViewBorderColor |
string |
#1192F6 |
NO |
The color of the currently focused text box |
| codeViewBorderWidth |
number |
1 |
NO |
width of code view border |
| codeViewBorderRadius |
number |
5 |
NO |
radius of code view border |
| codeViewBackgroundColor |
string |
default |
NO |
code view background color |
| codeFontSize |
number |
default |
NO |
code font size |
| codeColor |
string |
#222222 |
NO |
color of code |
| secureTextEntry |
boolean |
false |
NO |
Set to true when entering a password，default is false |
| coverStyle |
object |
null |
NO |
cover style |
| coverRadius |
number |
codeFontSize / 2 |
NO |
cover radius |
| coverColor |
string |
black |
NO |
cover color |
| warningTitle |
string |
black |
NO |
When the input content is not a number, the title of the prompt box |
| warningContent |
string |
black |
NO |
When the input content is not a number, the content of the prompt box |
| warningButtonText |
string |
black |
NO |
When the input content is not a number, the button text of the prompt box |
| Name |
isRequired |
Description |
| onInputChangeText |
NO |
When the text in the input box changes, the method is called, and the latest value is returned. |
| onInputCompleted |
NO |
Callback method when input is complete |
| reset |
NO |
Clear the input and set the focus to the first input box, call using ref |
| blur |
NO |
Hide the keyboard, call using ref |
| focus |
NO |
Display keyboard, call using ref |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent