react native element textinput

반응-신용 요소-텍스트

반응 네이티브 텍스트 텍스트, TagsInput 및 자동 완성 구성 요소는 iOS 및 Android 모두에 대해 쉽게 사용자 정의 할 수 있습니다.

특징

• 하나의 패키지로 TextInput, TagsInput 및 자동 완성
• 사용하기 쉽습니다
• iOS 및 Android에서 일관된 모양과 느낌
• 사용자 정의 가능한 글꼴 크기, 색상 및 애니메이션 지속 시간
• TypeScript로 구현되었습니다

시작하기

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

또는

    yarn add react - native - element - textinput 

소스 코드 데모

• React-Native-Template 경보 반응 원시를위한 아름다운 템플릿입니다.

데모

TextInput은 TextInputProps를 확장합니다

소품	매개 변수	ISREQUIRE	기본
방법	기본 또는 숫자 또는 비밀번호	아니요	스위치 모드 TextInput
스타일	뷰 스타일	아니요	컨테이너 뷰 스타일
상표	끈	아니요	TextInput에 대한 레이블
라벨 스타일	텍스트 스타일	아니요	레이블 텍스트 스타일
자리 보유자	텍스트 스타일	아니요	자리 소유자 용 텍스트 스타일
입력 스타일	텍스트 스타일	아니요	입력보기 스타일
텍스트로	끈	아니요	텍스트 오류
TexterrorStyle	텍스트 스타일	아니요	텍스트 오류 스타일
Showicon	부울	아니요	아이콘 명확한 텍스트를 표시하거나 숨기십시오
아이콘 스타일	이미지 스타일	아니요	아이콘 명확한 텍스트 스타일
포커스 콜러	끈	아니요	텍스트에 초점을 맞출 때 색상
글꼴	끈	아니요	글꼴 스타일을 사용자 정의하십시오
Renderlefticon	() => jsx.element	아니요	TextInput의 왼쪽 아이콘을 사용자 정의하십시오
Renderrighticon	() => jsx.element	아니요	TextInput의 오른쪽 아이콘을 사용자 정의하십시오

Hashtaginput은 TextInputProps를 확장합니다

소품	매개 변수	ISREQUIRE	기본
스타일	뷰 스타일	아니요	컨테이너 뷰 스타일
상표	끈	아니요	TextInput에 대한 레이블
라벨 스타일	텍스트 스타일	아니요	레이블 텍스트 스타일
자리 보유자	텍스트 스타일	아니요	자리 소유자 용 텍스트 스타일
입력 스타일	텍스트 스타일	아니요	입력보기 스타일
텍스트로	끈	아니요	텍스트 오류
TexterrorStyle	텍스트 스타일	아니요	텍스트 오류 스타일
Showicon	부울	아니요	아이콘 명확한 텍스트를 표시하거나 숨기십시오
아이콘 스타일	이미지 스타일	아니요	아이콘 명확한 텍스트 스타일
포커스 콜러	끈	아니요	텍스트에 초점을 맞출 때 색상
글꼴	끈	아니요	글꼴 스타일을 사용자 정의하십시오
Renderlefticon	() => jsx.element	아니요	TextInput의 왼쪽 아이콘을 사용자 정의하십시오
Renderrighticon	() => jsx.element	아니요	TextInput의 오른쪽 아이콘을 사용자 정의하십시오
데이터	끈[]	아니요	데이터는 일반 배열입니다
해시 태그 스타일	뷰 스타일	아니요	Hashtash 컨테이너보기 스타일
해시 태그 텍스트 스타일	텍스트 스타일	아니요	해시 태그 텍스트 스타일
onchangevalue	(string []) => void	아니요	제출 값을 제출할 때 호출되는 콜백
RenderHashTagitem	(항목, unselect? : () => void) => jsx.element	아니요	데이터에서 항목을 가져 와서 선택한 목록으로 렌더링합니다.

TagsInput은 TextInputProps를 확장합니다

소품	매개 변수	ISREQUIRE	기본
스타일	뷰 스타일	아니요	컨테이너 뷰 스타일
상표	끈	아니요	TextInput에 대한 레이블
라벨 스타일	텍스트 스타일	아니요	레이블 텍스트 스타일
자리 보유자	텍스트 스타일	아니요	자리 소유자 용 텍스트 스타일
입력 스타일	텍스트 스타일	아니요	입력보기 스타일
텍스트로	끈	아니요	텍스트 오류
TexterrorStyle	텍스트 스타일	아니요	텍스트 오류 스타일
Showicon	부울	아니요	아이콘 명확한 텍스트를 표시하거나 숨기십시오
아이콘 스타일	이미지 스타일	아니요	아이콘 명확한 텍스트 스타일
포커스 콜러	끈	아니요	텍스트에 초점을 맞출 때 색상
글꼴	끈	아니요	글꼴 스타일을 사용자 정의하십시오
Renderlefticon	() => jsx.element	아니요	TextInput의 왼쪽 아이콘을 사용자 정의하십시오
Renderrighticon	() => jsx.element	아니요	TextInput의 오른쪽 아이콘을 사용자 정의하십시오
데이터	끈[]	아니요	데이터는 일반 배열입니다
태그 스타일	뷰 스타일	아니요	Hashtash 컨테이너보기 스타일
TagstextStyle	텍스트 스타일	아니요	해시 태그 텍스트 스타일
onchangevalue	(string []) => void	아니요	제출 값을 제출할 때 호출되는 콜백
rendertagsitem	(항목, unselect? : () => void) => jsx.element	아니요	데이터에서 항목을 가져 와서 선택한 목록으로 렌더링합니다.

AutoComplete는 TextInputProps를 확장합니다

소품	매개 변수	ISREQUIRE	기본
데이터	끈[]	아니요	데이터는 일반 배열입니다
스타일	뷰 스타일	아니요	컨테이너 뷰 스타일
상표	끈	아니요	TextInput에 대한 레이블
라벨 스타일	텍스트 스타일	아니요	레이블 텍스트 스타일
자리 보유자	텍스트 스타일	아니요	자리 소유자 용 텍스트 스타일
입력 스타일	텍스트 스타일	아니요	입력보기 스타일
텍스트로	끈	아니요	텍스트 오류
TexterrorStyle	텍스트 스타일	아니요	텍스트 오류 스타일
Showicon	부울	아니요	아이콘 명확한 텍스트를 표시하거나 숨기십시오
아이콘 스타일	이미지 스타일	아니요	아이콘 명확한 텍스트 스타일
포커스 콜러	끈	아니요	텍스트에 초점을 맞출 때 색상
글꼴	끈	아니요	글꼴 스타일을 사용자 정의하십시오
Renderlefticon	() => jsx.element	아니요	TextInput의 왼쪽 아이콘을 사용자 정의하십시오
Renderrighticon	() => jsx.element	아니요	TextInput의 오른쪽 아이콘을 사용자 정의하십시오
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 } ,
  } ) ;