react native element textinput Download - react native element textinput Quellcode herunterladen

React-Native-Element-Texterput

Ein reagierender Textinput, ein Tagsinput und eine automatische Komponente, die sich sowohl für iOS als auch für Android anpassen kann.

Merkmale

TextInput, Tagsinput und automatisch in einem Paket
Einfach zu bedienen
Konsequentes Erscheinungsbild auf iOS und Android
Anpassbare Schriftgröße, Farben und Animationsdauer
Implementiert mit TypeScript

Erste Schritte

    npm install react - native - element - textinput -- save

oder

    yarn add react - native - element - textinput

Quellcode Demo

React-native-Template-Komponenten Eine schöne Vorlage für React Native.

Demo

TextInput erweitert TextInputProps

Requisiten	Parameter	IsRequire	Standard
Modus	Standard oder numerisches oder Passwort	NEIN	Textinput Switch -Modus
Stil	ViewStyle	NEIN	Styling für Containeransicht
Etikett	Saite	NEIN	Etikett für TextInput
Labelstil	Textstyle	NEIN	Styling für Etikettentext
Platzhalter	Textstyle	NEIN	Styling für Platzhaltertext
Inputstyle	Textstyle	NEIN	Styling für die Eingabeansicht
Texterror	Saite	NEIN	Textfehler
Texterrorstyle	Textstyle	NEIN	Styling für Textfehler
Showicon	Boolean	NEIN	Icon Clear Text anzeigen oder ausblenden
IconStyle	Imagestyle	NEIN	Styling für Icon Clear Text
Fokuscolor	Saite	NEIN	Farbe beim Fokus auf TextInput
Schriftfamilie	Saite	NEIN	Anpassen Sie den Schriftartenstil
Renderlefticon	() => Jsx.element	NEIN	Passen Sie das linke Symbol für textInput an
Renderrighticon	() => Jsx.element	NEIN	Passen Sie das richtige Symbol für textInput an

Hashtaginput erweitert TextInputProps

Requisiten	Parameter	IsRequire	Standard
Stil	ViewStyle	NEIN	Styling für Containeransicht
Etikett	Saite	NEIN	Etikett für TextInput
Labelstil	Textstyle	NEIN	Styling für Etikettentext
Platzhalter	Textstyle	NEIN	Styling für Platzhaltertext
Inputstyle	Textstyle	NEIN	Styling für die Eingabeansicht
Texterror	Saite	NEIN	Textfehler
Texterrorstyle	Textstyle	NEIN	Styling für Textfehler
Showicon	Boolean	NEIN	Icon Clear Text anzeigen oder ausblenden
IconStyle	Imagestyle	NEIN	Styling für Icon Clear Text
Fokuscolor	Saite	NEIN	Farbe beim Fokus auf TextInput
Schriftfamilie	Saite	NEIN	Anpassen Sie den Schriftartenstil
Renderlefticon	() => Jsx.element	NEIN	Passen Sie das linke Symbol für textInput an
Renderrighticon	() => Jsx.element	NEIN	Passen Sie das richtige Symbol für textInput an
Daten	String []	NEIN	Daten sind ein einfaches Array
Hashtagstyle	ViewStyle	NEIN	Styling für Hashtash -Containeransicht
HashTagtextStyle	Textstyle	NEIN	Styling für Hashtag -Text
onchangeValue	(String []) => void	NEIN	Rückruf, der beim Senden von Wert aufgerufen wird
Renderhashtagitem	(Element, nicht ausgewählt ?: () => void) => jsx.element	NEIN	Nimmt ein Element aus Daten und macht es in die ausgewählte Liste

Tagsinput erweitert TextInputProps

Requisiten	Parameter	IsRequire	Standard
Stil	ViewStyle	NEIN	Styling für Containeransicht
Etikett	Saite	NEIN	Etikett für TextInput
Labelstil	Textstyle	NEIN	Styling für Etikettentext
Platzhalter	Textstyle	NEIN	Styling für Platzhaltertext
Inputstyle	Textstyle	NEIN	Styling für die Eingabeansicht
Texterror	Saite	NEIN	Textfehler
Texterrorstyle	Textstyle	NEIN	Styling für Textfehler
Showicon	Boolean	NEIN	Icon Clear Text anzeigen oder ausblenden
IconStyle	Imagestyle	NEIN	Styling für Icon Clear Text
Fokuscolor	Saite	NEIN	Farbe beim Fokus auf TextInput
Schriftfamilie	Saite	NEIN	Anpassen Sie den Schriftartenstil
Renderlefticon	() => Jsx.element	NEIN	Passen Sie das linke Symbol für textInput an
Renderrighticon	() => Jsx.element	NEIN	Passen Sie das richtige Symbol für textInput an
Daten	String []	NEIN	Daten sind ein einfaches Array
TagsStyle	ViewStyle	NEIN	Styling für Hashtash -Containeransicht
tagestextstyle	Textstyle	NEIN	Styling für Hashtag -Text
onchangeValue	(String []) => void	NEIN	Rückruf, der beim Senden von Wert aufgerufen wird
Rendertagsitem	(Element, nicht ausgewählt ?: () => void) => jsx.element	NEIN	Nimmt ein Element aus Daten und macht es in die ausgewählte Liste

Autoperete erweitert TextInputProps

Requisiten	Parameter	IsRequire	Standard
Daten	String []	NEIN	Daten sind ein einfaches Array
Stil	ViewStyle	NEIN	Styling für Containeransicht
Etikett	Saite	NEIN	Etikett für TextInput
Labelstil	Textstyle	NEIN	Styling für Etikettentext
Platzhalter	Textstyle	NEIN	Styling für Platzhaltertext
Inputstyle	Textstyle	NEIN	Styling für die Eingabeansicht
Texterror	Saite	NEIN	Textfehler
Texterrorstyle	Textstyle	NEIN	Styling für Textfehler
Showicon	Boolean	NEIN	Icon Clear Text anzeigen oder ausblenden
IconStyle	Imagestyle	NEIN	Styling für Icon Clear Text
Fokuscolor	Saite	NEIN	Farbe beim Fokus auf TextInput
Schriftfamilie	Saite	NEIN	Anpassen Sie den Schriftartenstil
Renderlefticon	() => Jsx.element	NEIN	Passen Sie das linke Symbol für textInput an
Renderrighticon	() => Jsx.element	NEIN	Passen Sie das richtige Symbol für textInput an
Renderitem	(Element: String) => jsx.element	NEIN	Nimmt einen Artikel aus Daten und rendert es in die Liste

Beispiel 1

  import React , { useState } from 'react' ;
  import { StyleSheet , View } from 'react-native' ;
  import { TextInput } from 'react-native-element-textinput' ;

  const TextInputComponent = ( ) => {
    const [ value , setValue ] = useState ( '' ) ;

    return (
      < View style = { styles . container } >
        < TextInput
          value = { value }
          style = { styles . input }
          inputStyle = { styles . inputStyle }
          labelStyle = { styles . labelStyle }
          placeholderStyle = { styles . placeholderStyle }
          textErrorStyle = { styles . textErrorStyle }
          label = "TextInput"
          placeholder = "Placeholder"
          placeholderTextColor = "gray"
          focusColor = "blue"
          onChangeText = { text => {
            setValue ( text ) ;
          } }
        />
      </ View >
    ) ;
  } ;

  export default TextInputComponent ;

  const styles = StyleSheet . create ( {
    container : {
      padding : 16 ,
    } ,
    input : {
      height : 55 ,
      paddingHorizontal : 12 ,
      borderRadius : 8 ,
      borderWidth : 0.5 ,
      borderColor : '#DDDDDD' ,
    } ,
    inputStyle : { fontSize : 16 } ,
    labelStyle : {
      fontSize : 14 ,
      position : 'absolute' ,
      top : - 10 ,
      backgroundColor : 'white' ,
      paddingHorizontal : 4 ,
      marginLeft : - 4 ,
    } ,
    placeholderStyle : { fontSize : 16 } ,
    textErrorStyle : { fontSize : 16 } ,
  } ) ;

Beispiel 2

  import React , { useState } from 'react' ;
  import { StyleSheet , View } from 'react-native' ;
  import { TextInput } from 'react-native-element-textinput' ;

  const TextInputComponent = ( ) => {
    const [ value , setValue ] = useState ( '' ) ;

    return (
      < View style = { styles . container } >
        < TextInput
          value = { value }
          style = { styles . input }
          inputStyle = { styles . inputStyle }
          labelStyle = { styles . labelStyle }
          placeholderStyle = { styles . placeholderStyle }
          textErrorStyle = { styles . textErrorStyle }
          label = "TextInput"
          placeholder = "Placeholder"
          placeholderTextColor = "gray"
          onChangeText = { text => {
            setValue ( text ) ;
          } }
        />
      </ View >
    ) ;
  } ;

  export default TextInputComponent ;

  const styles = StyleSheet . create ( {
    container : {
      padding : 16 ,
    } ,
    input : {
      height : 55 ,
      paddingHorizontal : 12 ,
      borderRadius : 8 ,
      backgroundColor : 'white' ,
      shadowColor : '#000' ,
      shadowOffset : {
        width : 0 ,
        height : 1 ,
      } ,
      shadowOpacity : 0.2 ,
      shadowRadius : 1.41 ,
      elevation : 2 ,
    } ,
    inputStyle : { fontSize : 16 } ,
    labelStyle : { fontSize : 14 } ,
    placeholderStyle : { fontSize : 16 } ,
    textErrorStyle : { fontSize : 16 } ,
  } ) ;

Beispiel 3

  import React , { useState } from 'react' ;
  import { StyleSheet , View } from 'react-native' ;
  import { TextInput } from 'react-native-element-textinput' ;

  const TextInputComponent = ( ) => {
    const [ value , setValue ] = useState ( '' ) ;

    return (
      < View style = { styles . container } >
        < TextInput
          mode = "password"
          value = { value }
          style = { styles . input }
          inputStyle = { styles . inputStyle }
          labelStyle = { styles . labelStyle }
          placeholderStyle = { styles . placeholderStyle }
          textErrorStyle = { styles . textErrorStyle }
          label = "Password"
          placeholder = "Placeholder"
          placeholderTextColor = "gray"
          onChangeText = { text => {
            setValue ( text ) ;
          } }
        />
      </ View >
    ) ;
  } ;

  export default TextInputComponent ;

  const styles = StyleSheet . create ( {
    container : {
      padding : 16 ,
    } ,
    input : {
      height : 55 ,
      paddingHorizontal : 12 ,
      borderRadius : 8 ,
      backgroundColor : 'white' ,
      shadowColor : '#000' ,
      shadowOffset : {
        width : 0 ,
        height : 1 ,
      } ,
      shadowOpacity : 0.2 ,
      shadowRadius : 1.41 ,
      elevation : 2 ,
    } ,
    inputStyle : { fontSize : 16 } ,
    labelStyle : { fontSize : 14 } ,
    placeholderStyle : { fontSize : 16 } ,
    textErrorStyle : { fontSize : 16 } ,
  } ) ;

Beispiel 4

  import React , { useState } from 'react' ;
  import { StyleSheet , View } from 'react-native' ;
  import { HashtagInput } from 'react-native-element-textinput' ;

  const TextInputComponent = ( ) => {
    const [ value , setValue ] = useState < string [ ] > ( [ ] ) ;

    return (
      < View style = { styles . container } >
        < HashtagInput
          data = { value }
          style = { styles . input }
          inputStyle = { styles . inputStyle }
          labelStyle = { styles . labelStyle }
          placeholderStyle = { styles . placeholderStyle }
          textErrorStyle = { styles . textErrorStyle }
          hashtagStyle = { styles . hashtagStyle }
          hashtagTextStyle = { styles . hashtagTextStyle }
          placeholder = "Hashtag..."
          placeholderTextColor = "gray"
          onChangeValue = { value => {
            setValue ( value ) ;
          } }
        />
      </ View >
    ) ;
  } ;

  export default TextInputComponent ;

  const styles = StyleSheet . create ( {
    container : {
      padding : 16 ,
    } ,
    input : {
      height : 55 ,
      paddingHorizontal : 12 ,
      borderRadius : 8 ,
      backgroundColor : 'white' ,
      shadowColor : '#000' ,
      shadowOffset : {
        width : 0 ,
        height : 1 ,
      } ,
      shadowOpacity : 0.2 ,
      shadowRadius : 1.41 ,
      elevation : 2 ,
    } ,
    inputStyle : { fontSize : 16 } ,
    labelStyle : { fontSize : 14 } ,
    placeholderStyle : { fontSize : 16 } ,
    textErrorStyle : { fontSize : 16 } ,
    hashtagStyle : {
      borderWidth : 0 ,
      borderRadius : 16 ,
      padding : 8 ,
      backgroundColor : 'white' ,
      shadowColor : '#000' ,
      shadowOffset : {
        width : 0 ,
        height : 1 ,
      } ,
      shadowOpacity : 0.2 ,
      shadowRadius : 1.41 ,
      elevation : 2 ,
    } ,
    hashtagTextStyle : {
      fontSize : 16 ,
    } ,
  } ) ;

Beispiel 5

  import React , { useState } from 'react' ;
  import { StyleSheet , View } from 'react-native' ;
  import { TagsInput } from 'react-native-element-textinput' ;

  const TextInputComponent = ( ) => {
    const [ value , setValue ] = useState ( [ ] ) ;

    return (
      < View style = { styles . container } >
        < TagsInput
          data = { value }
          style = { styles . input }
          inputStyle = { styles . inputStyle }
          labelStyle = { styles . labelStyle }
          placeholderStyle = { styles . placeholderStyle }
          textErrorStyle = { styles . textErrorStyle }
          tagsStyle = { styles . tagsStyle }
          tagsTextStyle = { styles . tagsTextStyle }
          label = "TagsInput"
          placeholder = "Tags..."
          placeholderTextColor = "gray"
          onChangeValue = { value => {
            setValue ( value ) ;
          } }
        />
      </ View >
    ) ;
  } ;

  export default TextInputComponent ;

  const styles = StyleSheet . create ( {
    container : {
      padding : 16 ,
    } ,
    input : {
      paddingHorizontal : 12 ,
      borderRadius : 8 ,
      backgroundColor : 'white' ,
      shadowColor : '#000' ,
      shadowOffset : {
        width : 0 ,
        height : 1 ,
      } ,
      shadowOpacity : 0.2 ,
      shadowRadius : 1.41 ,
      elevation : 2 ,
    } ,
    inputStyle : {
      fontSize : 16 ,
      minWidth : 80 ,
    } ,
    labelStyle : {
      fontSize : 14 ,
      position : 'absolute' ,
      top : - 10 ,
      backgroundColor : 'white' ,
      paddingHorizontal : 4 ,
      marginLeft : - 4 ,
    } ,
    placeholderStyle : { fontSize : 16 } ,
    textErrorStyle : { fontSize : 16 } ,
    tagsStyle : {
      borderWidth : 0 ,
      borderRadius : 16 ,
      padding : 8 ,
      backgroundColor : 'white' ,
      shadowColor : '#000' ,
      shadowOffset : {
        width : 0 ,
        height : 1 ,
      } ,
      shadowOpacity : 0.2 ,
      shadowRadius : 1.41 ,
      elevation : 2 ,
    } ,
    tagsTextStyle : {
      fontSize : 16 ,
    } ,
  } ) ;

Beispiel 6

  import React , { useState } from 'react' ;
  import { StyleSheet , View } from 'react-native' ;
  import { AutoComplete } from 'react-native-element-textinput' ;

  const TextInputComponent = ( ) => {
    const [ value , setValue ] = useState ( '' ) ;

    return (
      < View style = { styles . container } >
        < AutoComplete
          value = { value }
          data = { [ 'hello' , 'how are you' , 'complete' ] }
          style = { styles . input }
          inputStyle = { styles . inputStyle }
          labelStyle = { styles . labelStyle }
          placeholderStyle = { styles . placeholderStyle }
          textErrorStyle = { styles . textErrorStyle }
          label = "Auto Complete"
          placeholder = "Placeholder..."
          placeholderTextColor = "gray"
          onChangeText = { e => {
            setValue ( e ) ;
          } }
        />
      </ View >
    ) ;
  } ;

  export default TextInputComponent ;

  const styles = StyleSheet . create ( {
    container : {
      padding : 16 ,
    } ,
    input : {
      height : 55 ,
      paddingHorizontal : 12 ,
      borderRadius : 8 ,
      backgroundColor : 'white' ,
      shadowColor : '#000' ,
      shadowOffset : {
        width : 0 ,
        height : 1 ,
      } ,
      shadowOpacity : 0.2 ,
      shadowRadius : 1.41 ,
      elevation : 2 ,
    } ,
    inputStyle : { fontSize : 16 } ,
    labelStyle : { fontSize : 14 } ,
    placeholderStyle : { fontSize : 16 } ,
    textErrorStyle : { fontSize : 16 } ,
  } ) ;