react native dynamic search bar

내장 된 스피너

버전 2.0?

버전 2.0이 여기 있습니까?

• 처음부터 완전히 다시 작성 되었습니까?
• 유지 보수를 위해 훨씬 더 나은 코딩 및 적은 의존성
• 3 개의 종속성이 제거 되었습니까?
• 이제 더 나은 소품 관리 및 멋진 사용자 정의가 가능합니다
• 다크 모드 통합?

이 SearchBar 로 무엇을할지 기다릴 수 없습니까?

설치

종속성 추가 :

원시 반응

npm i react-native-dynamic-search-bar

npm i react-native-spinkit

npm i @freakycoder/react-native-bounceable

엑스포 버전

npm i WrathChaos/react-native-dynamic-search-bar#expo

npm i react-native-animated-spinkit

npm i @freakycoder/react-native-bounceable

피어 의존성

중요한! 설치해야합니다

 "react-native-spinkit" : ">= 1.5.0" ,
"@freakycoder/react-native-bounceable" : ">= 0.2.2" , 

엑스포 피어 의존성

중요한! 설치해야합니다

 "react-native-animated-spinkit" : ">= 1.5.0" ,
"@freakycoder/react-native-bounceable" : ">= 0.2.2" ,

용법

수입

 import SearchBar from "react-native-dynamic-search-bar" ; 

기본 사용

 < SearchBar
  placeholder = "Search here"
  onPress = { ( ) => alert ( "onPress" ) }
  onChangeText = { ( text ) => console . log ( text ) }
/> 

고급 사용

고급 사용법에 대한 예제를 확인할 수 있습니다

 < SearchBar
  fontColor = "#c6c6c6"
  iconColor = "#c6c6c6"
  shadowColor = "#282828"
  cancelIconColor = "#c6c6c6"
  backgroundColor = "#353d5e"
  placeholder = "Search here"
  onChangeText = { ( text ) => this . filterList ( text ) }
  onSearchPress = { ( ) => console . log ( "Search Icon is pressed" ) }
  onClearPress = { ( ) => this . filterList ( "" ) }
  onPress = { ( ) => alert ( "onPress" ) }
/> 

고급 내장 스피너 사용

고급 내장 스피너 사용법에 대한 예제를 확인할 수 있습니다.

 import React , { Component } from "react" ;
import { View } from "react-native" ;
import SearchBar from "react-native-dynamic-search-bar" ;

export default class Test extends Component {
  handleOnChangeText = ( text ) => {
    // ? Visible the spinner
    this . setState ( {
      searchText : text ,
      spinnerVisibility : true ,
    } ) ;

    // ? After you've done to implement your use-case
    // ? Do not forget to set false to spinner's visibility
    this . setState ( {
      spinnerVisibility : false ,
    } ) ;
  } ;

  render ( ) {
    const { spinnerVisibility } = this . state ;
    return (
      < View >
        < SearchBar
          height = { 50 }
          fontSize = { 24 }
          fontColor = "#fdfdfd"
          iconColor = "#fdfdfd"
          shadowColor = "#282828"
          cancelIconColor = "#fdfdfd"
          backgroundColor = "#ba312f"
          spinnerVisibility = { spinnerVisibility }
          placeholder = "Search any cosmetics ..."
          fontFamily = "BurbankBigCondensed-Black"
          shadowStyle = { styles . searchBarShadowStyle }
          onChangeText = { this . handleOnChangeText }
        />
      </ View >
    ) ;
  }
}

구성 - 소품

재산	유형	기본	설명
스타일	뷰 스타일	기본	기본 검색보기의 스타일 객체를 설정하거나 재정의합니다.
다크 모드	부울	거짓	다크 모드를 활성화합니다
onchangetext	기능	기능	OnChangetext 로직에 대한 자신의 기능을 설정하십시오
onpress	기능	기능	Onpress 기능에 대한 자신의 기능을 설정하십시오
onsearchpress	기능	기능	검색 버튼의 Onpress 기능에 대한 자신의 기능 설정
온다리 프레스	기능	기능	Clear 버튼의 Onpress 기능에 대한 자신의 기능을 설정하십시오.
onblur	기능	기능	텍스트 입력의 Onblur 기능에 대한 자신의 기능 설정
Onfocus	기능	기능	텍스트 입력의 Onblur 기능에 대한 자신의 기능 설정
TextInputStyle	텍스트 스타일	기본	텍스트 입력의 스타일 객체를 설정하거나 재정의합니다.
searchiconimagestyle	이미지 스타일	기본	검색 아이콘 이미지 스타일의 스타일 객체를 설정하거나 대체합니다.
Cleariconimagestyle	이미지 스타일	기본	명확한 아이콘 이미지 스타일의 스타일 객체를 설정하거나 재정의합니다.
imagecomponent	요소	영상	React-Native의 기본 이미지 대신 자신의 이미지 구성 요소를 설정하십시오.
SearchIconcomponent	요소	기본	검색 구성 요소의 아이콘 대신 자신의 구성 요소를 설정하십시오.
CLEARICONCOMPONTON	요소	기본	명확한 구성 요소에 대한 아이콘 대신 자신의 구성 요소를 설정하십시오.
SearchIconimagesOURCE	isource	기본	검색 아이콘 이미지 소스를 변경하십시오
cleariconimagesource	isource	기본	명확한 아이콘 이미지 소스를 변경하십시오
cleariconimagesource	isource	기본	명확한 아이콘 이미지 소스를 변경하십시오
자리 표시 자	끈	"여기서 검색 ..."	자신의 자리 표시 자 문자열을 설정하십시오
자리 표시기 텍스트 컬러	색상	한정되지 않은	자리 표시 자 텍스트 색상을 설정합니다
SpinnerColor	색상	#fdfdfd	스피너 색상을 변경하십시오
스피너 즈	숫자	기본	스피너 크기를 변경하십시오
스피너 타입	요소	원	스피너 유형을 변경하십시오
Spinnervisibility	부울	거짓	스피너 가시성을 변경하십시오

엑스포 호환성

Expo에서 동적 검색 바가 사용할 수 있습니다. 피어 종속성을 추가하면됩니다.

 "react-native-dynamic-vector-icons" : "WrathChaos/react-native-dynamic-vector-icons#expo" 

알려진 문제

기계적 인조 인간

벡터 아이콘이 표시되지 않습니다 : o

->이 코드 라인을 앱/gradle에 추가해야합니다.

 apply from : "../../node_modules/react-native-vector-icons/fonts.gradle" 

애니메이션이 예제처럼 안드로이드에서 작동하지 않습니까?

-> 안드로이드에서 실험적 레이아웃 화를 활성화해야합니다. 다음은 다음과 같습니다.

 import { UIManager } from 'react-native' ;

constructor ( ) {
    super ( ) ;
    if ( Platform . OS === 'android' ) {
      UIManager . setLayoutAnimationEnabledExperimental && UIManager . setLayoutAnimationEnabledExperimental ( true ) ;
    }
}

로드맵

• 더 나은 코딩과 적은 의존성으로 완전히 다시 작성했습니다
• 더 나은 타입 스크립트가있는 전체 코드 리팩토링
• 특허
• 매체에 Lib에 관한 기사를 작성하십시오
• 타입 스크립트 도전!
• 엑스포 버전을 최신 기능으로 업데이트하십시오
• 내장 그림자 스타일 제거
• 문서의 래퍼 그림자 예제
• 더 나은 예와 GIF

작가

freakycoder, [email protected]

특허

React Native Dynamic Search Bar Library는 MIT 라이센스로 제공됩니다. 자세한 내용은 라이센스 파일을 참조하십시오.