首頁>編程相關>三方組件
下載

反應本元素 - textinput

一個反應本地文本輸入，tagSinput和自動完成組件易於自定義iOS和Android。

特徵

  • textInput，tagsinput和一個軟件包中的自動完成
  • 便於使用
  • 對iOS和Android的一致外觀
  • 可自定義的字體尺寸，顏色和動畫持續時間
  • 用打字稿實施

入門

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

或者

    yarn add react - native - element - textinput

源代碼演示

  • 反應本機 - 板組件是一個精美的反應天然模板。

演示

TextInput擴展了TextInputProps

道具參數Isrequire預設
模式默認或數字或密碼不開關模式文本輸入
風格ViewStyle不容器視圖的造型
標籤細繩不文本輸入標籤
標籤風格文本風格不標籤文字樣式
佔位符文本風格不佔位符文字的樣式
輸入風格文本風格不輸入視圖的樣式
Texterror細繩不文本錯誤
TexterrorStyle文本風格不文字錯誤的樣式
Showicon布爾不顯示或隱藏圖標清晰的文字
圖示成像派不圖標清晰文本的樣式
焦點細繩不當聚焦到文本輸入時顏色
fontfomily細繩不自定義字體樣式
RenderLefticon （）=> jsx.element不自定義左圖textInput
Renderrighticon （）=> jsx.element不自定義textInput的正確圖標

HashTaginput擴展了TextInputProps

道具參數Isrequire預設
風格ViewStyle不容器視圖的造型
標籤細繩不文本輸入標籤
標籤風格文本風格不標籤文字樣式
佔位符文本風格不佔位符文字的樣式
輸入風格文本風格不輸入視圖的樣式
Texterror細繩不文本錯誤
TexterrorStyle文本風格不文字錯誤的樣式
Showicon布爾不顯示或隱藏圖標清晰的文字
圖示成像派不圖標清晰文本的樣式
焦點細繩不當聚焦到文本輸入時顏色
fontfomily細繩不自定義字體樣式
RenderLefticon （）=> jsx.element不自定義左圖textInput
Renderrighticon （）=> jsx.element不自定義textInput的正確圖標
數據細繩[]不數據是一個普通的陣列
Hashtagstyle ViewStyle不HashTash容器視圖的造型
hashtagtextstyle文本風格不標籤文本的造型
onChangeValue （string []）=> void不提交值時調用的回調
Renderhashtagitem （item，unselect？：（）=> void）=> jsx.element不從數據中獲取項目並將其渲染到所選的列表中

TagSInput擴展了TextInputProps

道具參數Isrequire預設
風格ViewStyle不容器視圖的造型
標籤細繩不文本輸入標籤
標籤風格文本風格不標籤文字樣式
佔位符文本風格不佔位符文字的樣式
輸入風格文本風格不輸入視圖的樣式
Texterror細繩不文本錯誤
TexterrorStyle文本風格不文字錯誤的樣式
Showicon布爾不顯示或隱藏圖標清晰的文字
圖示成像派不圖標清晰文本的樣式
焦點細繩不當聚焦到文本輸入時顏色
fontfomily細繩不自定義字體樣式
RenderLefticon （）=> jsx.element不自定義左圖textInput
Renderrighticon （）=> jsx.element不自定義textInput的正確圖標
數據細繩[]不數據是一個普通的陣列
標籤ViewStyle不HashTash容器視圖的造型
tagstextstyle文本風格不標籤文本的造型
onChangeValue （string []）=> void不提交值時調用的回調
Rendertagsitem （item，unselect？：（）=> void）=> jsx.element不從數據中獲取項目並將其渲染到所選的列表中

自動完成擴展了TextInputProps

道具參數Isrequire預設
數據細繩[]不數據是一個普通的陣列
風格ViewStyle不容器視圖的造型
標籤細繩不文本輸入標籤
標籤風格文本風格不標籤文字樣式
佔位符文本風格不佔位符文字的樣式
輸入風格文本風格不輸入視圖的樣式
Texterror細繩不文本錯誤
TexterrorStyle文本風格不文字錯誤的樣式
Showicon布爾不顯示或隱藏圖標清晰的文字
圖示成像派不圖標清晰文本的樣式
焦點細繩不當聚焦到文本輸入時顏色
fontfomily細繩不自定義字體樣式
RenderLefticon （）=> jsx.element不自定義左圖textInput
Renderrighticon （）=> jsx.element不自定義textInput的正確圖標
Renderitem （item：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 } ,
  } ) ;

展開
附加信息
相關應用
爲您推薦
相關資訊 全部