react native element textinputダウンロード - react native element textinputインプットソースコードをダウンロードする

React-Native-Element-Textinput

iOSとAndroidの両方でカスタマイズしやすいReact-Native TextInput、TagSINPUT、AutoCompleteコンポーネント。

特徴

1つのパッケージでTextInput、TagSINPUT、およびオートコンプリート
使いやすい
iOSとAndroidの一貫したルックアンドフィール
カスタマイズ可能なフォントサイズ、色、アニメーション期間
TypeScriptで実装されています

はじめる

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

または

    yarn add react - native - element - textinput

ソースコードデモ

React-Native-Template-Components Reactネイティブの美しいテンプレート。

デモ

TextInputはTextInputPropsを拡張します

小道具	パラメージ	isRequire	デフォルト
モード	デフォルトまたは数値またはパスワード	いいえ	スイッチモードTextInput
スタイル	viewstyle	いいえ	コンテナビュー用のスタイリング
ラベル	弦	いいえ	TextInputのラベル
ラベルスタイル	TextStyle	いいえ	ラベルテキストのスタイリング
PlaceHolderStyle	TextStyle	いいえ	PlaceHolderStyleテキストのスタイリング
inputStyle	TextStyle	いいえ	入力ビュー用のスタイリング
Texterror	弦	いいえ	テキストエラー
Texterrorstyle	TextStyle	いいえ	テキストエラーのスタイリング
Showicon	ブール	いいえ	アイコンを表示または非表示にします。クリアテキスト
iconstyle	イメージスタイル	いいえ	アイコンクリアテキストのスタイリング
FocusColor	弦	いいえ	TextInputにフォーカスするときの色
フォントファミリー	弦	いいえ	フォントスタイルをカスタマイズします
renderlefticon	（）=> jsx.element	いいえ	TextInputの左アイコンをカスタマイズします
Renderrighticon	（）=> jsx.element	いいえ	TextInputの右アイコンをカスタマイズします

HashtaginputはTextInputPropsを拡張します

小道具	パラメージ	isRequire	デフォルト
スタイル	viewstyle	いいえ	コンテナビュー用のスタイリング
ラベル	弦	いいえ	TextInputのラベル
ラベルスタイル	TextStyle	いいえ	ラベルテキストのスタイリング
PlaceHolderStyle	TextStyle	いいえ	PlaceHolderStyleテキストのスタイリング
inputStyle	TextStyle	いいえ	入力ビュー用のスタイリング
Texterror	弦	いいえ	テキストエラー
Texterrorstyle	TextStyle	いいえ	テキストエラーのスタイリング
Showicon	ブール	いいえ	アイコンを表示または非表示にします。クリアテキスト
iconstyle	イメージスタイル	いいえ	アイコンクリアテキストのスタイリング
FocusColor	弦	いいえ	TextInputにフォーカスするときの色
フォントファミリー	弦	いいえ	フォントスタイルをカスタマイズします
renderlefticon	（）=> jsx.element	いいえ	TextInputの左アイコンをカスタマイズします
Renderrighticon	（）=> jsx.element	いいえ	TextInputの右アイコンをカスタマイズします
データ	弦[]	いいえ	データは単純な配列です
ハッシュタグル	viewstyle	いいえ	ハッシュタッシュコンテナビュー用のスタイリング
HashtagTextStyle	TextStyle	いいえ	ハッシュタグテキストのスタイリング
onchangevalue	（string []）=> void	いいえ	送信価値の時に呼び出されるコールバック
renderhashtagitem	（item、unselect？：（）=> void）=> jsx.element	いいえ	データからアイテムを取得し、選択したリストにそれをレンダリングします

TagSinputはTextInputPropsを拡張します

小道具	パラメージ	isRequire	デフォルト
スタイル	viewstyle	いいえ	コンテナビュー用のスタイリング
ラベル	弦	いいえ	TextInputのラベル
ラベルスタイル	TextStyle	いいえ	ラベルテキストのスタイリング
PlaceHolderStyle	TextStyle	いいえ	PlaceHolderStyleテキストのスタイリング
inputStyle	TextStyle	いいえ	入力ビュー用のスタイリング
Texterror	弦	いいえ	テキストエラー
Texterrorstyle	TextStyle	いいえ	テキストエラーのスタイリング
Showicon	ブール	いいえ	アイコンを表示または非表示にします。クリアテキスト
iconstyle	イメージスタイル	いいえ	アイコンクリアテキストのスタイリング
FocusColor	弦	いいえ	TextInputにフォーカスするときの色
フォントファミリー	弦	いいえ	フォントスタイルをカスタマイズします
renderlefticon	（）=> jsx.element	いいえ	TextInputの左アイコンをカスタマイズします
Renderrighticon	（）=> jsx.element	いいえ	TextInputの右アイコンをカスタマイズします
データ	弦[]	いいえ	データは単純な配列です
Tagsstyle	viewstyle	いいえ	ハッシュタッシュコンテナビュー用のスタイリング
TagStextStyle	TextStyle	いいえ	ハッシュタグテキストのスタイリング
onchangevalue	（string []）=> void	いいえ	送信価値の時に呼び出されるコールバック
rendertagsitem	（item、unselect？：（）=> void）=> jsx.element	いいえ	データからアイテムを取得し、選択したリストにそれをレンダリングします

AutoCompleteはTextInputPropsを拡張します

小道具	パラメージ	isRequire	デフォルト
データ	弦[]	いいえ	データは単純な配列です
スタイル	viewstyle	いいえ	コンテナビュー用のスタイリング
ラベル	弦	いいえ	TextInputのラベル
ラベルスタイル	TextStyle	いいえ	ラベルテキストのスタイリング
PlaceHolderStyle	TextStyle	いいえ	PlaceHolderStyleテキストのスタイリング
inputStyle	TextStyle	いいえ	入力ビュー用のスタイリング
Texterror	弦	いいえ	テキストエラー
Texterrorstyle	TextStyle	いいえ	テキストエラーのスタイリング
Showicon	ブール	いいえ	アイコンを表示または非表示にします。クリアテキスト
iconstyle	イメージスタイル	いいえ	アイコンクリアテキストのスタイリング
FocusColor	弦	いいえ	TextInputにフォーカスするときの色
フォントファミリー	弦	いいえ	フォントスタイルをカスタマイズします
renderlefticon	（）=> 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 } ,
  } ) ;