react native material design searchbar

bilah pencarian-desain-bahan-asli-reaksi

Bilah Pencarian Desain Material Asli React

Pengaturan

Instal SearchBar dari npm dengan npm i -S react-native-material-design-searchbar . Kemudian, minta dari file JavaScript aplikasi Anda dengan import SearchBar from 'react-native-material-design-searchbar' . Pustaka ini bergantung pada ikon vektor-asli-reaksi. Silakan tautkan dengan mengikuti panduan instalasinya.

Penggunaan

Semua alat peraga bersifat opsional kecuali tinggi.

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

Alat Peraga yang Tersedia

• onSearchChange : Panggilan balik pada perubahan pencarian
• onClear : Callback ketika tombol 'X' ditekan. Ini juga memanggil onSearchChange dengan string kosong.
• searchValue : Menginisialisasi kolom input. Mengubah prop ini tidak mengubah nilai input.
• onBackPress : Fungsi opsional, ikon Callback di belakang ditekan
• alwaysShowBackButton : Opsional bool, gunakan jika Anda ingin selalu menampilkan tombol kembali alih-alih mencari, defaultnya false
• iconCloseName : String opsional, gunakan untuk menyesuaikan ikon tutup
• iconSearchName : String opsional, gunakan untuk menyesuaikan ikon pencarian
• iconBackName : String opsional, gunakan untuk menyesuaikan ikon kembali
• iconCloseComponent : Objek opsional, komponen khusus untuk ikon tutup (mengganti iconCloseName)
• iconSearchComponent : Objek opsional, komponen khusus untuk ikon pencarian (mengganti iconSearchName)
• iconBackComponent : Objek opsional, komponen khusus untuk ikon belakang (mengganti iconBackName)
• iconColor : String opsional, gunakan untuk menentukan ukuran padding yang berbeda, defaultnya adalah #737373
• placeholder : String opsional, gunakan untuk menyesuaikan teks placeholder, defaultnya adalah eSearch...
• placeholderColor : String opsional, gunakan untuk menentukan warna placeholder yang berbeda, defaultnya adalah #bdbdbd
• returnKeyType : String opsional, gunakan untuk menyesuaikan jenis kunci pengembalian
• padding : String opsional, gunakan untuk menentukan ukuran padding yang berbeda, defaultnya adalah 5
• inputStyle : String opsional, gunakan untuk meneruskan gaya Anda ke View yang memuatnya
• inputProps : Objek opsional, gunakan untuk meneruskan props tambahan ke TextInput , misalnya {autoFocus: true}
• textStyle : String opsional, gunakan untuk meneruskan gaya Anda ke TextInput

Pengemas React akan menyertakan komponen SearchBar dalam paket JS aplikasi Anda dan membuatnya tersedia untuk digunakan oleh aplikasi Anda.

Berkontribusi

Kontribusi dipersilakan.

LISENSI

MIT