unduh react native search filter - unduh react native search filter Unduh kode sumber

react native search filter

Kode sumber lainnya

v0.1.5

Unduh

Bereaksi Filter Pencarian Asli

Bereaksi komponen pencarian asli dengan fungsi filter.

Memulai

Instalasi

Menggunakan npm :

$ npm install react-native-search-filter --save

Menggunakan yarn :

$ yarn add react-native-search-filter

Contoh Penggunaan

Contoh lengkap tersedia di sini.

 import React , { Component } from 'react' ;
import { StyleSheet , Text , View , ScrollView , TouchableOpacity } from 'react-native' ;
import SearchInput , { createFilter } from 'react-native-search-filter' ;
import emails from './emails' ;
const KEYS_TO_FILTERS = [ 'user.name' , 'subject' ] ;

export default class App extends Component < { } > {
 constructor ( props ) {
    super ( props ) ;
    this . state = {
      searchTerm : ''
    }
  }
  searchUpdated ( term ) {
    this . setState ( { searchTerm : term } )
  }
  render ( ) {
    const filteredEmails = emails . filter ( createFilter ( this . state . searchTerm , KEYS_TO_FILTERS ) )
    return (
      < View style = { styles . container } >
        < SearchInput 
          onChangeText = { ( term ) => { this . searchUpdated ( term ) } } 
          style = { styles . searchInput }
          placeholder = "Type a message to search"
          / >
        < ScrollView >
          { filteredEmails . map ( email => {
            return (
              < TouchableOpacity onPress = { ( ) => alert ( email . user . name ) } key = { email . id } style = { styles . emailItem } >
                < View >
                  < Text > { email . user . name } < / Text >
                  < Text style = { styles . emailSubject } > { email . subject } < / Text >
                < / View >
              < / TouchableOpacity >
            )
          } ) }
        < / ScrollView >
      < / View >
    ) ;
  }
}

const styles = StyleSheet . create ( {
  container : {
    flex : 1 ,
    backgroundColor : '#fff' ,
    justifyContent : 'flex-start'
  } ,
  emailItem : {
    borderBottomWidth : 0.5 ,
    borderColor : 'rgba(0,0,0,0.3)' ,
    padding : 10
  } ,
  emailSubject : {
    color : 'rgba(0,0,0,0.5)'
  } ,
  searchInput : {
    padding : 10 ,
    borderColor : '#CCC' ,
    borderWidth : 1
  }
} ) ;

API dan Konfigurasi

Milik	Jenis	Bawaan	Keterangan
`caseSensitive`	`boolean`	`false`	Tentukan apakah penelusuran harus peka huruf besar-kecil.
`clearIcon`	`Node`	`null`	Ikon hapus opsional.
`clearIconViewStyles`	`Style`	`{position:absolute',top: 18,right: 22}`	Gaya opsional untuk tampilan ikon yang jelas.
`filterKeys`	`string` atau `[string]`		Akan digunakan oleh metode filter jika tidak ada argumen yang diteruskan di sana.
`fuzzy`	`boolean`	`false`	Tentukan apakah pencarian harus kabur.
`inputViewStyles`	`Style`		Gaya opsional untuk wadah masukan.
`onChangeText`	`Function`	Diperlukan	Fungsi dipanggil ketika istilah pencarian diubah (akan diteruskan sebagai argumen).
`sortResults`	`boolean`	`false`	Tentukan apakah hasil pencarian harus diurutkan berdasarkan relevansi (hanya berfungsi dengan pencarian fuzzy).
`throttle`	`number`	`200`	Kurangi frekuensi panggilan ke fungsi onChange (dalam ms).
`onSubmitEditing`	`function`	`() => {}`	Mendefinisikan fungsi untuk tombol pencarian keyboard diPress.
`inputFocus`	`boolean`	`false`	Menentukan apakah bidang menerima fokus.
`returnKeyType`	`string`	`done`	Menentukan tampilan kunci pengembalian. Nilai-nilai berikut berfungsi di seluruh platform: `done` , `go` , `next` , `search` , `send`

Metode

`filter([keys])`

Mengembalikan fungsi yang dapat digunakan untuk memfilter array. kuncinya bisa berupa string , [string] atau null .

Jika kunci array adalah array, fungsi akan mengembalikan nilai true jika setidaknya salah satu kunci item cocok dengan istilah pencarian.

Metode Statis

 filter ( searchTerm , [ keys ] , [ { caseSensitive , fuzzy , sortResults } ] )

Mengembalikan fungsi yang dapat digunakan untuk memfilter array. searchTerm dapat berupa regex atau String. kuncinya bisa berupa string , [string] atau null .

Jika kunci array adalah array, fungsi akan mengembalikan nilai true jika setidaknya salah satu kunci item cocok dengan istilah pencarian.

Masalah yang Diketahui

Sembunyikan `clearIcon` jika input pencarian kosong.

Asalkan Anda memiliki paket ikon khusus, metode peralihan singkat untuk properti dapat digunakan: clearIcon={this.state.searchTerm!==''&&<Icon name="x"/>} .