react native material design searchbar 다운로드 - react native material design searchbar 소스 코드 다운로드

react native material design searchbar

기타 소스코드

1.0.0

다운로드

반응 네이티브 재료 디자인 검색 표시줄

반응 네이티브 머티리얼 디자인 SearchBar

설정

npm i -S react-native-material-design-searchbar 사용하여 npm에서 SearchBar를 설치합니다. 그런 다음 import SearchBar from 'react-native-material-design-searchbar' 사용하여 앱의 JavaScript 파일에서 이를 요구합니다. 이 라이브러리는 반응 네이티브 벡터 아이콘에 의존합니다. 설치 가이드에 따라 연결하세요.

용법

높이를 제외한 모든 소품은 선택 사항입니다.

 import React , { Component } from 'react' ;
import SearchBar from 'react-native-material-design-searchbar' ;

export default class ExampleComponent extends Component {
  render ( ) {
    return (
      < SearchBar
        onSearchChange = { ( ) => console . log ( 'On Search Change' ) }
        height = { 50 }
        onFocus = { ( ) => console . log ( 'On Focus' ) }
        onBlur = { ( ) => console . log ( 'On Blur' ) }
        placeholder = { 'Search...' }
        autoCorrect = { false }
        padding = { 5 }
        returnKeyType = { 'search' }
      / >
    ) ;
  }
} ;

사용 가능한 소품

onSearchChange : 검색 변경에 대한 콜백
onClear : 'X' 버튼을 눌렀을 때 콜백합니다. 이는 또한 빈 문자열로 onSearchChange 호출합니다.
searchValue : 입력 필드를 초기화합니다. 이 소품을 변경해도 입력 값은 변경되지 않습니다.
onBackPress : 선택적 기능, 뒤로 아이콘이 눌렸을 때 콜백
alwaysShowBackButton : 선택적 bool, 검색 대신 항상 뒤로 버튼을 표시하려는 경우 사용합니다. 기본값은 false 입니다.
iconCloseName : 선택적 문자열, 닫기 아이콘을 사용자 정의하는 데 사용합니다.
iconSearchName : 선택적 문자열, 검색 아이콘을 사용자 정의하는 데 사용합니다.
iconBackName : 선택적 문자열, 뒤로 아이콘을 사용자 정의하는 데 사용합니다.
iconCloseComponent : 선택적 개체, 닫기 아이콘에 대한 사용자 정의 구성 요소(iconCloseName 재정의)
iconSearchComponent : 선택적 개체, 검색 아이콘에 대한 사용자 정의 구성 요소(iconSearchName 재정의)
iconBackComponent : 선택적 객체, 뒤로 아이콘에 대한 사용자 정의 구성 요소(iconBackName 재정의)
iconColor : 선택적 문자열입니다. 이를 사용하여 다른 패딩 크기를 정의합니다. 기본값은 #737373 입니다.
placeholder : 선택적 문자열입니다. 자리 표시자 텍스트를 사용자 정의하는 데 사용합니다. 기본값은 eSearch...
placeholderColor : 선택적 문자열. 다른 자리 표시자 색상을 정의하는 데 사용합니다. 기본값은 #bdbdbd 입니다.
returnKeyType : 선택적 문자열입니다. 반환 키 유형을 사용자 지정하는 데 사용합니다.
padding : 선택적인 문자열로, 다른 패딩 크기를 정의하는 데 사용됩니다. 기본값은 5 입니다.
inputStyle : 선택적 문자열입니다. 스타일을 포함하는 View 에 전달하는 데 사용합니다.
inputProps : 선택적 개체입니다. 이를 사용하여 TextInput 에 추가 소품을 전달합니다(예: {autoFocus: true}
textStyle : 선택적 문자열로, 스타일을 TextInput 에 전달하는 데 사용됩니다.