OTPInput介绍

OTPInput是一个用于输入OTP（一次性密码）的React Native组件，主要用于二次验证登录等场景。它支持自定义样式和长度，并且在用户输入OTP时提供了实时反馈。

安装

在终端中运行以下命令进行安装：

npm install --save react-native-otp-inputs

使用

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import OTPInputView from '@twotalltotems/react-native-otp-input';

const App = () => {
  const [OTP, setOTP] = useState('');

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ marginBottom: 20 }}>Please enter the 4 digit code sent to you</Text>
      <OTPInputView
        style={{ width: '80%', height: 200 }}
        pinCount={4}
        autoFocusOnLoad
        codeInputFieldStyle={{ borderBottomWidth: 1 }}
        onCodeFilled={(code) => {
          console.log(code);
          setOTP(code);
        }}
      />
      <Text>Entered OTP is: {OTP}</Text>
    </View>
  );
};

export default App;

API

Props

• pinCount (required): 输入框数量.

• onCodeFilled: 输入完成后的回调函数

• codeInputFieldStyle: 输入框样式

• clearInputs: 是否在输入完成后自动清除所有输入

• autoFocusOnLoad: 是否在组件加载时自动聚焦输入框

• keyboardType: 输入框使用的键盘类型

• secureTextEntry: 输入框是否为安全输入

示例

下面是一个简单的使用示例：

<OTPInputView
  pinCount={4}
  onCodeFilled={(code) => {
    console.log(code)
  }}
/>

结论

OTPInput是一个方便实用的React Native组件，可以用于输入OTP（一次性密码）等场景。它支持自定义样式和长度，并且在用户输入OTP时提供了实时反馈。