react-native中验证码输入框的使用—react-native-confirmation-code-field

地址：https://www.npmjs.com/package/react-native-confirmation-code-field

• 下载：npm install --save react-native-confirmation-code-field
• 代码：

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

import {
  CodeField,
  Cursor,
  useBlurOnFulfill,
  useClearByFocusCell,
} from 'react-native-confirmation-code-field';

const styles = StyleSheet.create({
  root: {flex: 1, padding: 20},
  title: {textAlign: 'center', fontSize: 30},
  codeFiledRoot: {marginTop: 20},
  // 里面每个密码小框的样式
  cell: {
    width: 40,
    height: 40,
    lineHeight: 38,
    fontSize: 24,
    borderWidth: 2,
    borderColor: '#00000030',
    textAlign: 'center',
  },
  // 当里面的每个密码小框被选中之后的样式
  focusCell: {
    borderColor: '#000',
  },
});


class Index extends Component {
  state = {
    vcodeTxt: ''
  };

  onVcodeChangeText = () => {
    this.setState({vcodeTxt});
  }

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

export default Index;