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: { 40, height: 40, lineHeight: 38, fontSize: 24, borderBottomWidth: 2, borderColor: '#00000030', textAlign: 'center', color: '#7d53ea' }, focusCell: { borderColor: '#7d53ea' }, }); export default App;
最后效果