react native material design searchbar

barra de pesquisa react-native-material-design

Uma barra de pesquisa do React Native Material Design

Configurar

Instale o SearchBar do npm com npm i -S react-native-material-design-searchbar . Em seguida, solicite-o dos arquivos JavaScript do seu aplicativo com import SearchBar from 'react-native-material-design-searchbar' . Esta biblioteca depende de ícones vetoriais nativos de reação. Por favor, vincule-o seguindo o guia de instalação.

Uso

Todos os adereços são opcionais, exceto a altura.

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

Adereços disponíveis

• onSearchChange : retorno de chamada na alteração da pesquisa
• onClear : retorno de chamada quando o botão 'X' é pressionado. Isso também chama onSearchChange com uma string vazia.
• searchValue : inicializa o campo de entrada. Alterar esta propriedade não altera o valor de entrada.
• onBackPress : função opcional, ícone de retorno de chamada pressionado
• alwaysShowBackButton : Bool opcional, use se quiser sempre mostrar o botão Voltar em vez de pesquisar, o padrão é false
• iconCloseName : String opcional, use-a para personalizar o ícone de fechamento
• iconSearchName : string opcional, use-a para personalizar o ícone de pesquisa
• iconBackName : String opcional, use-a para personalizar o ícone de volta
• iconCloseComponent : objeto opcional, componente personalizado para o ícone de fechamento (substitui iconCloseName)
• iconSearchComponent : objeto opcional, componente personalizado para o ícone de pesquisa (substitui iconSearchName)
• iconBackComponent : objeto opcional, componente personalizado para o ícone traseiro (substitui iconBackName)
• iconColor : String opcional, use-a para definir um tamanho de preenchimento diferente, o padrão é #737373
• placeholder : String opcional, use-a para personalizar o texto do placeholder, o padrão é eSearch...
• placeholderColor : String opcional, use-a para definir uma cor de espaço reservado diferente, o padrão é #bdbdbd
• returnKeyType : string opcional, use-a para personalizar o tipo de chave de retorno
• padding : string opcional, use-a para definir um tamanho de preenchimento diferente, o padrão é 5
• inputStyle : String opcional, use-a para passar seu estilo para a View que contém
• inputProps : objeto opcional, use-o para passar adereços adicionais para TextInput , por exemplo {autoFocus: true}
• textStyle : String opcional, use-a para passar seu estilo para o TextInput

O empacotador React incluirá o componente SearchBar no pacote JS do seu aplicativo e o disponibilizará para uso do seu aplicativo.

Contribuindo

Contribuições são bem-vindas.

LICENÇA

MIT