React Native Text Eingabemaske

Question

Wir entwickeln Programm auf React Native, und ich habe eine Frage. Wie man eine Text Eingabemaske für Postleitzahl und Handynummer über React Native erstellt?

Hier ist ein Beispiel:

Answer 1

Um eine maskierte Texteingabe macht in der india React, leider müssen Sie eine native Modul oder Komponente schreiben, weil onKeyPress Verfahren von TextInput- für den und RN Träger benötigt wird, es nur für iOS. Also wenn deine App nur für iOS gedacht ist ist es möglich, ich habe es aber mit nicht guter Leistung gemacht.

Sie können eine gute native Implementierung von Maskierung finden und einfach in React Native mit Java, Objective-C integrieren. Ich habe das mit den Bibliotheken von RedMadRobot gemacht, wenn es Ihren Bedürfnissen entspricht, können Sie mein Modul ausprobieren - https://github.com/ivanzotov/react-native-text-input-mask.

Answer 2

Schauen Sie sich diese Bibliothek an. https://github.com/wix/react-native-ui-lib

(oder direkt aus: https://github.com/wix/react-native-ui-lib#masked-input)

Es ermöglicht Ihnen, benutzerdefinierte maskierte Eingabe in jedem gewünschten Format zu machen.

Sie können wie folgt verwendet werden: (dies ist ein Beispiel für eine Telefonnummer ist)

import {MaskedInput} from 'react-native-ui-lib' 
 

 
// in your render... 
 
<MaskedInput 
 
    renderMaskedText={this.renderMaskedInput} 
 
    caretHidden 
 
    keyboardType={'numeric'} 
 
/> 
 

 
renderMaskedInput(value) { 
 

 
    return (
 
    <View> 
 
     <Text> 
 
     {value.substr(0, 3)} - {value.substr(3, 10)} 
 
     <Text> 
 
    <View> 
 
); 
 
}