react-native 验证码静态插件

 

 

yarn add react-native-confirmation-code-field

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

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

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

class App extends Component{
    constructor(props){
        super(props)
        this.state={
            value: ''
        }
    }
    setValue=(value)=>{
        this.setState({
            value: value
        })
    }
    render(){
        return (
            <CodeField
                value={this.state.value}
                onChangeText={this.setValue}
                cellCount={6}
                rootStyle={styles.codeFieldRoot}
                keyboardType="number-pad"
                textContentType="oneTimeCode"
                renderCell={({index, symbol, isFocused}) => (
                    <Text
                        key={index}
                        style={[styles.cell, isFocused && styles.focusCell]}
                        >
                        {symbol || (isFocused ? <Cursor /> : null)}
                    </Text>
                )}
            />
        )
    }
}

const styles = StyleSheet.create({
  codeFieldRoot: {marginTop: 20},
  cell: {
    width: 40,
    height: 40,
    lineHeight: 38,
    fontSize: 24,
    borderBottomWidth: 2,
    borderColor: '#00000030',
    textAlign: 'center',
    color: '#7d53ea'
  },
  focusCell: {
    borderColor: '#7d53ea'
  },
});

export default App;

最后效果