react native dynamic search bar

Spinner embutido

Versão 2.0?

Versão 2.0 está aqui?

• Completamente reescrito do zero?
• Codificação muito melhor para manutenção e menos dependência
• 3 dependências são removidas?
• Melhores gerenciamento de suporte e personalizações legais são possíveis agora
• Integração do modo escuro?

Mal posso esperar para ver o que você vai fazer com esta SearchBar ?

Instalação

Adicione a dependência:

Reagir nativo

npm i react-native-dynamic-search-bar

npm i react-native-spinkit

npm i @freakycoder/react-native-bounceable

Versão expo

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

npm i react-native-animated-spinkit

npm i @freakycoder/react-native-bounceable

Dependências de pares

IMPORTANTE! Você precisa instalá -los

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

Dependências de pares da exposição

IMPORTANTE! Você precisa instalá -los

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

Uso

Importar

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

Uso básico

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

Uso avançado

Você pode verificar o exemplo do uso avançado

 < 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" ) }
/> 

Uso avançado de girador embutido

Você pode verificar o exemplo do uso avançado de spinner embutido

 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 >
    ) ;
  }
}

Configuração - Props

Propriedade	Tipo	Padrão	Descrição
estilo	ViewStyle	padrão	Defina ou substitua o objeto de estilo para a visualização de pesquisa principal
DarkMode	booleano	falso	Habilite o modo escuro
OnchangeText	função	função	Defina sua própria função para a lógica ONCHANGETEXT
OnPress	função	função	Defina sua própria função para a funcionalidade onpress
OnsearchPress	função	função	Defina sua própria função para a funcionalidade onpress do botão de pesquisa
Onctreme	função	função	Defina sua própria função para a funcionalidade Onpress do botão transparente
onblur	função	função	Defina sua própria função para a funcionalidade OnBlur da entrada de texto
Onfocus	função	função	Defina sua própria função para a funcionalidade OnBlur da entrada de texto
TextInputStyle	TextStyle	padrão	Defina ou substitua o objeto de estilo para a entrada de texto
Searchiconimagestyle	Imaginestyle	padrão	Defina ou substitua o objeto de estilo para o estilo de imagem do ícone de pesquisa
cleariconimagestyle	Imaginestyle	padrão	Defina ou substitua o objeto de estilo para o estilo de imagem de ícone claro
ImageComponent	componente	Imagem	Defina seu próprio componente de imagem em vez da imagem padrão do React-Native
SearchicoNComponent	componente	padrão	Defina seu próprio componente em vez de ícone para o componente de pesquisa
ClearicoNComponent	componente	padrão	Defina seu próprio componente em vez de ícone para o componente claro
SearchiconImagesource	Isource	padrão	Alterar a fonte de imagem do ícone de pesquisa
cleariconimagesource	Isource	padrão	Alterar a fonte de imagem de ícone clara
cleariconimagesource	Isource	padrão	Alterar a fonte de imagem de ícone clara
espaço reservado	corda	"Pesquise aqui ..."	Defina sua própria sequência de espaço reservado
PlaceHolderTextColor	cor	indefinido	Defina a cor do texto de espaço reservado
SpinnerColor	cor	#fdfdfd	Altere a cor do spinner
Spinnerize	número	padrão	Altere o tamanho do girador
SpinnerType	componente	Círculo	Altere o tipo de spinner
Spinnervisibility	booleano	falso	Altere a visibilidade do spinner

Compatibilidade da Expo

A barra de pesquisa dinâmica é utilizável com a Expo. Você só precisa adicionar uma dependência de colegas:

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

Questões conhecidas

Android

Os ícones vetoriais não estão mostrando: O

-> Você precisa adicionar esta linha de código ao aplicativo/gradle

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

As animações não estão trabalhando no Android como o exemplo?

-> Você precisa ativar a layoutanimação experimental no Android. Aqui está como fazer isso:

 import { UIManager } from 'react-native' ;

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

Roteiro

• Completamente reescrito com melhor codificação e menos dependência
• Código completo Refatoração com melhor datilografado
• LICENÇA
• Escreva um artigo sobre a lib
• Desafio datilografado!
• Atualize a versão Expo para os últimos recursos
• Remoção de estilo de sombra embutida
• Exemplo de sombra do wrapper sobre documentação
• Melhor exemplo e gifs

Autor

Freakycoder, [email protected]

Licença

A biblioteca de barras de pesquisa dinâmica nativa reagir está disponível sob a licença do MIT. Consulte o arquivo de licença para obter mais informações.