react native element textinput

React-Native-Element-TextInput

ส่วนประกอบ textInput, tagsInput และส่วนประกอบ AUTOCOMPONED ง่ายต่อการปรับแต่งสำหรับทั้ง iOS และ Android

คุณสมบัติ

• TextInput, TagsInput และ Autocomplete ในแพ็คเกจเดียว
• ใช้งานง่าย
• รูปลักษณ์และความรู้สึกที่สอดคล้องกันบน iOS และ Android
• ขนาดตัวอักษรที่ปรับแต่งได้สีและระยะเวลาภาพเคลื่อนไหว
• นำไปใช้กับ typescript

เริ่มต้นใช้งาน

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

หรือ

    yarn add react - native - element - textinput 

การสาธิตซอร์สโค้ด

• องค์ประกอบที่ทำปฏิกิริยากับ-สัมผัส-เทมเพลตเทมเพลตที่สวยงามสำหรับ React Native

การสาธิต

TextInput ขยาย TextInputProps

อุปกรณ์ประกอบฉาก	พารามิเตอร์	ISRequire	ค่าเริ่มต้น
โหมด	ค่าเริ่มต้นหรือตัวเลขหรือรหัสผ่าน	เลขที่	Switch Mode TextInput
สไตล์	ViewStyle	เลขที่	สไตล์สำหรับมุมมองคอนเทนเนอร์
ฉลาก	สาย	เลขที่	ป้ายกำกับสำหรับ textInput
สไตล์ฉลาก	สไตล์ข้อความ	เลขที่	สไตล์สำหรับข้อความฉลาก
สถานที่	สไตล์ข้อความ	เลขที่	จัดแต่งทรงผม
อินพุต	สไตล์ข้อความ	เลขที่	สไตล์สำหรับมุมมองอินพุต
Texterror	สาย	เลขที่	ข้อผิดพลาดในข้อความ
TexterrorStyle	สไตล์ข้อความ	เลขที่	จัดแต่งทรงผมสำหรับข้อผิดพลาดข้อความ
การฉาย	บูลีน	เลขที่	แสดงหรือซ่อนไอคอนเคลียร์ข้อความ
ไอคอน	จินตนาการ	เลขที่	สไตล์สำหรับไอคอน Clear Text
FocusColor	สาย	เลขที่	สีเมื่อโฟกัสไปที่ TextInput
fontfamily	สาย	เลขที่	ปรับแต่งรูปแบบตัวอักษร
การรับเด็ก	() => jsx.element	เลขที่	ปรับแต่งไอคอนซ้ายสำหรับ TextInput
RENDERRIGHTICON	() => jsx.element	เลขที่	ปรับแต่งไอคอนขวาสำหรับ TextInput

Hashtaginput ขยาย textInputProps

อุปกรณ์ประกอบฉาก	พารามิเตอร์	ISRequire	ค่าเริ่มต้น
สไตล์	ViewStyle	เลขที่	สไตล์สำหรับมุมมองคอนเทนเนอร์
ฉลาก	สาย	เลขที่	ป้ายกำกับสำหรับ textInput
สไตล์ฉลาก	สไตล์ข้อความ	เลขที่	สไตล์สำหรับข้อความฉลาก
สถานที่	สไตล์ข้อความ	เลขที่	จัดแต่งทรงผม
อินพุต	สไตล์ข้อความ	เลขที่	สไตล์สำหรับมุมมองอินพุต
Texterror	สาย	เลขที่	ข้อผิดพลาดในข้อความ
TexterrorStyle	สไตล์ข้อความ	เลขที่	จัดแต่งทรงผมสำหรับข้อผิดพลาดข้อความ
การฉาย	บูลีน	เลขที่	แสดงหรือซ่อนไอคอนเคลียร์ข้อความ
ไอคอน	จินตนาการ	เลขที่	สไตล์สำหรับไอคอน Clear Text
FocusColor	สาย	เลขที่	สีเมื่อโฟกัสไปที่ TextInput
fontfamily	สาย	เลขที่	ปรับแต่งรูปแบบตัวอักษร
การรับเด็ก	() => jsx.element	เลขที่	ปรับแต่งไอคอนซ้ายสำหรับ TextInput
RENDERRIGHTICON	() => jsx.element	เลขที่	ปรับแต่งไอคอนขวาสำหรับ TextInput
ข้อมูล	สตริง []	เลขที่	ข้อมูลเป็นอาร์เรย์ธรรมดา
Hashtagstyle	ViewStyle	เลขที่	สไตล์สำหรับมุมมองแฮชแทชคอนเทนเนอร์
hashtagtextstyle	สไตล์ข้อความ	เลขที่	สไตล์สำหรับข้อความแฮชแท็ก
onchangevalue	(สตริง []) => โมฆะ	เลขที่	การโทรกลับที่เรียกว่าเมื่อส่งค่า
renderhashtagitem	(รายการ, unselect?: () => void) => jsx.element	เลขที่	นำรายการจากข้อมูลและแสดงผลในรายการที่เลือก

TagsInput ขยาย TextInputProps

อุปกรณ์ประกอบฉาก	พารามิเตอร์	ISRequire	ค่าเริ่มต้น
สไตล์	ViewStyle	เลขที่	สไตล์สำหรับมุมมองคอนเทนเนอร์
ฉลาก	สาย	เลขที่	ป้ายกำกับสำหรับ textInput
สไตล์ฉลาก	สไตล์ข้อความ	เลขที่	สไตล์สำหรับข้อความฉลาก
สถานที่	สไตล์ข้อความ	เลขที่	จัดแต่งทรงผม
อินพุต	สไตล์ข้อความ	เลขที่	สไตล์สำหรับมุมมองอินพุต
Texterror	สาย	เลขที่	ข้อผิดพลาดในข้อความ
TexterrorStyle	สไตล์ข้อความ	เลขที่	จัดแต่งทรงผมสำหรับข้อผิดพลาดข้อความ
การฉาย	บูลีน	เลขที่	แสดงหรือซ่อนไอคอนเคลียร์ข้อความ
ไอคอน	จินตนาการ	เลขที่	สไตล์สำหรับไอคอน Clear Text
FocusColor	สาย	เลขที่	สีเมื่อโฟกัสไปที่ TextInput
fontfamily	สาย	เลขที่	ปรับแต่งรูปแบบตัวอักษร
การรับเด็ก	() => jsx.element	เลขที่	ปรับแต่งไอคอนซ้ายสำหรับ TextInput
RENDERRIGHTICON	() => jsx.element	เลขที่	ปรับแต่งไอคอนขวาสำหรับ TextInput
ข้อมูล	สตริง []	เลขที่	ข้อมูลเป็นอาร์เรย์ธรรมดา
Tagsstyle	ViewStyle	เลขที่	สไตล์สำหรับมุมมองแฮชแทชคอนเทนเนอร์
tagstextstyle	สไตล์ข้อความ	เลขที่	สไตล์สำหรับข้อความแฮชแท็ก
onchangevalue	(สตริง []) => โมฆะ	เลขที่	การโทรกลับที่เรียกว่าเมื่อส่งค่า
RENDERTAGSITEM	(รายการ, unselect?: () => void) => jsx.element	เลขที่	นำรายการจากข้อมูลและแสดงผลในรายการที่เลือก

Autocomplete ขยาย textInputProps

อุปกรณ์ประกอบฉาก	พารามิเตอร์	ISRequire	ค่าเริ่มต้น
ข้อมูล	สตริง []	เลขที่	ข้อมูลเป็นอาร์เรย์ธรรมดา
สไตล์	ViewStyle	เลขที่	สไตล์สำหรับมุมมองคอนเทนเนอร์
ฉลาก	สาย	เลขที่	ป้ายกำกับสำหรับ textInput
สไตล์ฉลาก	สไตล์ข้อความ	เลขที่	สไตล์สำหรับข้อความฉลาก
สถานที่	สไตล์ข้อความ	เลขที่	จัดแต่งทรงผม
อินพุต	สไตล์ข้อความ	เลขที่	สไตล์สำหรับมุมมองอินพุต
Texterror	สาย	เลขที่	ข้อผิดพลาดในข้อความ
TexterrorStyle	สไตล์ข้อความ	เลขที่	จัดแต่งทรงผมสำหรับข้อผิดพลาดข้อความ
การฉาย	บูลีน	เลขที่	แสดงหรือซ่อนไอคอนเคลียร์ข้อความ
ไอคอน	จินตนาการ	เลขที่	สไตล์สำหรับไอคอน Clear Text
FocusColor	สาย	เลขที่	สีเมื่อโฟกัสไปที่ TextInput
fontfamily	สาย	เลขที่	ปรับแต่งรูปแบบตัวอักษร
การรับเด็ก	() => jsx.element	เลขที่	ปรับแต่งไอคอนซ้ายสำหรับ TextInput
RENDERRIGHTICON	() => jsx.element	เลขที่	ปรับแต่งไอคอนขวาสำหรับ TextInput
RenderItem	(รายการ: สตริง) => 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 } ,
  } ) ;