首页>编程相关>三方组件
下载

反应本元素 - 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 } ,
  } ) ;

展开
附加信息
相关应用
为您推荐
相关资讯 全部