使用RN输入验证码(四个输入框)

萧寂173

已于 2024-03-26 15:27:55 修改

阅读量266

点赞数 2

分类专栏： react 文章标签： react native

于 2024-03-26 13:33:38 首次发布

本文链接：https://blog.csdn.net/weixin_68658847/article/details/137041642

版权

react 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

先安装

yarn add react-native-confirmation-code-field

RN代码

import React, { useState } from 'react';
import { SafeAreaView, Text, StyleSheet, Dimensions } from 'react-native';

import { CodeField, Cursor } from 'react-native-confirmation-code-field';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const styles = StyleSheet.create({
  root: { flex: 1, padding: 20 },
  title: { textAlign: 'center', fontSize: 30 },
  codeFiledRoot: { marginTop: 20, width: width / 1.2 },
  // 里面每个密码小框的样式
  cell: {
    width: 50,
    height: 50,
    lineHeight: 38,
    fontSize: 24,
    borderWidth: 2,
    borderColor: '#00000030',
    textAlign: 'center',
    borderRadius: 10,
  },
  // 当里面的每个密码小框被选中之后的样式
  focusCell: {
    borderColor: '#000',
  },
});


function Index() {
  const [vcodeTxt, setVcodeTxt] = useState('')

  function onVcodeChangeText(e) {
    // 这里是输入框的值
    console.log('e', e);
    setVcodeTxt(e)
  }

  return (
    <CodeField
      value={vcodeTxt}
      onChangeText={onVcodeChangeText}
      // 输入密码框的个数
      cellCount={4}
      rootStyle={styles.codeFiledRoot}
      keyboardType="number-pad"
      renderCell={({ index, symbol, isFocused }) => (
        <Text
          key={index}
          style={[styles.cell, isFocused && styles.focusCell]}
        >
          {symbol || (isFocused ? <Cursor style={{ height: 2 }} /> : null)}
        </Text>
      )}
    />
  );
}

export default Index;