react native element textinput Download - react native element textinput Скачать исходный код

React-Element-TextInput

Реакционная компонент TextInput, TagSinput и AutoComplete легко настраивает как для iOS, так и для Android.

Функции

TextInput, TagSinput и автозаполнение в одном пакете
Простой в использовании
Последовательный вид на iOS и Android
Настраиваемый размер шрифта, цвета и продолжительность анимации
Реализовано с помощью TypeScript

Начиная

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

или

    yarn add react - native - element - textinput

ДЕМО исходного кода

Реактивно-таковые компоненты. Прекрасный шаблон для нативного реагирования.

Демо

TextInput расширяет TextInputProps

Реквизит	Параметры	Isrequire	по умолчанию
режим	по умолчанию или цифровой или пароль	Нет	Переключение режима TextInput
стиль	Просмотр	Нет	Стиль для представления контейнера
этикетка	Нить	Нет	Этикетка для TextInput
метка	Текстовый стиль	Нет	Стиль для текста ярлыка
PlaceholderStyle	Текстовый стиль	Нет	Стиль для Text PlaceholderStyle
ввода -стиль	Текстовый стиль	Нет	Стиль для представления ввода
Texterror	Нить	Нет	Текстовая ошибка
Texterrorstyle	Текстовый стиль	Нет	Стиль для текстовой ошибки
Showicon	Логический	Нет	Показать или скрыть значок чистый текст
Iconstyle	Образец	Нет	Стиль для Icon Clear Text
Focuscolor	Нить	Нет	Цвет, когда фокусируется на TextInput
Фонфимилия	Нить	Нет	Настройте стиль шрифта
renderlefticon	() => Jsx.element	Нет	Настройте левый значок для TextInput
renderrighticon	() => Jsx.element	Нет	Настроить правый значок для текста.

Hashtaginput расширяет TextInputProps

Реквизит	Параметры	Isrequire	по умолчанию
стиль	Просмотр	Нет	Стиль для представления контейнера
этикетка	Нить	Нет	Этикетка для TextInput
метка	Текстовый стиль	Нет	Стиль для текста ярлыка
PlaceholderStyle	Текстовый стиль	Нет	Стиль для Text PlaceholderStyle
ввода -стиль	Текстовый стиль	Нет	Стиль для представления ввода
Texterror	Нить	Нет	Текстовая ошибка
Texterrorstyle	Текстовый стиль	Нет	Стиль для текстовой ошибки
Showicon	Логический	Нет	Показать или скрыть значок чистый текст
Iconstyle	Образец	Нет	Стиль для Icon Clear Text
Focuscolor	Нить	Нет	Цвет, когда фокусируется на TextInput
Фонфимилия	Нить	Нет	Настройте стиль шрифта
renderlefticon	() => Jsx.element	Нет	Настройте левый значок для TextInput
renderrighticon	() => Jsx.element	Нет	Настроить правый значок для текста.
данные	Нить[]	Нет	Данные - это простой массив
хэштагстиль	Просмотр	Нет	Стиль для вида хэшташ -контейнера
HashTagTextStyle	Текстовый стиль	Нет	Стиль для хэштега текста
OnchangeValue	(String []) => void	Нет	Обратный вызов, который вызывается, когда отправляйте значение
renderhashtagitem	(Item, Unselect?: () => void) => jsx.element	Нет	Берет элемент из данных и отдает его в выбранном списке

Tagsinput Extends TextInputProps

Реквизит	Параметры	Isrequire	по умолчанию
стиль	Просмотр	Нет	Стиль для представления контейнера
этикетка	Нить	Нет	Этикетка для TextInput
метка	Текстовый стиль	Нет	Стиль для текста ярлыка
PlaceholderStyle	Текстовый стиль	Нет	Стиль для Text PlaceholderStyle
ввода -стиль	Текстовый стиль	Нет	Стиль для представления ввода
Texterror	Нить	Нет	Текстовая ошибка
Texterrorstyle	Текстовый стиль	Нет	Стиль для текстовой ошибки
Showicon	Логический	Нет	Показать или скрыть значок чистый текст
Iconstyle	Образец	Нет	Стиль для Icon Clear Text
Focuscolor	Нить	Нет	Цвет, когда фокусируется на TextInput
Фонфимилия	Нить	Нет	Настройте стиль шрифта
renderlefticon	() => Jsx.element	Нет	Настройте левый значок для TextInput
renderrighticon	() => Jsx.element	Нет	Настроить правый значок для текста.
данные	Нить[]	Нет	Данные - это простой массив
TagsStyle	Просмотр	Нет	Стиль для вида хэшташ -контейнера
tagstextstyle	Текстовый стиль	Нет	Стиль для хэштега текста
OnchangeValue	(String []) => void	Нет	Обратный вызов, который вызывается, когда отправляйте значение
rendertagsitem	(Item, Unselect?: () => void) => jsx.element	Нет	Берет элемент из данных и отдает его в выбранном списке

Автозаполнение расширяет TextInputProps

Реквизит	Параметры	Isrequire	по умолчанию
данные	Нить[]	Нет	Данные - это простой массив
стиль	Просмотр	Нет	Стиль для представления контейнера
этикетка	Нить	Нет	Этикетка для TextInput
метка	Текстовый стиль	Нет	Стиль для текста ярлыка
PlaceholderStyle	Текстовый стиль	Нет	Стиль для Text PlaceholderStyle
ввода -стиль	Текстовый стиль	Нет	Стиль для представления ввода
Texterror	Нить	Нет	Текстовая ошибка
Texterrorstyle	Текстовый стиль	Нет	Стиль для текстовой ошибки
Showicon	Логический	Нет	Показать или скрыть значок чистый текст
Iconstyle	Образец	Нет	Стиль для Icon Clear Text
Focuscolor	Нить	Нет	Цвет, когда фокусируется на TextInput
Фонфимилия	Нить	Нет	Настройте стиль шрифта
renderlefticon	() => Jsx.element	Нет	Настройте левый значок для TextInput
renderrighticon	() => Jsx.element	Нет	Настроить правый значок для текста.
renderitem	(элемент: string) => jsx.element	Нет	Берет элемент из данных и отдает его в список

Пример 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 } ,
  } ) ;

Пример 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 } ,
  } ) ;

Пример 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 } ,
  } ) ;

Пример 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 ,
    } ,
  } ) ;

Пример 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 ,
    } ,
  } ) ;

Пример 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 } ,
  } ) ;