react native search filter

رد فعل مرشح البحث الأصلي

رد فعل مكون البحث الأصلي مع وظيفة التصفية.

ابدء

تثبيت

باستخدام npm :

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

باستخدام yarn :

$ yarn add react-native-search-filter

مثال الاستخدام

المثال الكامل متاح هنا.

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

واجهة برمجة التطبيقات والتكوين

ملكية	يكتب	تقصير	وصف
caseSensitive	boolean	false	حدد ما إذا كان البحث يجب أن يكون حساسًا لحالة الأحرف.
clearIcon	Node	null	رمز واضح اختياري.
clearIconViewStyles	Style	{position:absolute',top: 18,right: 22}	أنماط اختيارية لعرض الأيقونة الواضحة.
filterKeys	string أو [string]		سيتم استخدامه بواسطة طريقة التصفية إذا لم يتم تمرير أي وسيطة هناك.
fuzzy	boolean	false	حدد ما إذا كان البحث يجب أن يكون غامضًا.
inputViewStyles	Style		الأنماط الاختيارية لحاوية الإدخال.
onChangeText	Function	مطلوب	يتم استدعاء الوظيفة عند تغيير مصطلح البحث (سيتم تمريرها كوسيطة).
sortResults	boolean	false	حدد ما إذا كان يجب فرز نتائج البحث حسب مدى صلتها بالموضوع (يعمل فقط مع البحث الغامض).
throttle	number	200	تقليل تكرار الاتصال بوظيفة onChange (بالمللي ثانية).
onSubmitEditing	function	() => {}	يحدد وظيفة لزر البحث بلوحة المفاتيح عند الضغط.
inputFocus	boolean	false	يحدد ما إذا كان الحقل يتلقى التركيز.
returnKeyType	string	done	يحدد كيف ينبغي أن يبدو مفتاح العودة. تعمل القيم التالية عبر الأنظمة الأساسية: done ، go ، next ، search ، send

طُرق

filter([keys])

قم بإرجاع دالة يمكن استخدامها لتصفية مصفوفة. يمكن أن تكون المفاتيح string أو [string] أو null .

إذا كانت مفاتيح المصفوفة عبارة عن مصفوفة، فسترجع الدالة صحيحًا إذا كان أحد مفاتيح العنصر على الأقل يطابق مصطلح البحث.

الأساليب الثابتة

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

قم بإرجاع دالة يمكن استخدامها لتصفية مصفوفة. يمكن أن يكون مصطلح البحث عبارة عن regex أو سلسلة. يمكن أن تكون المفاتيح string أو [string] أو null .

إذا كانت مفاتيح المصفوفة عبارة عن مصفوفة، فسترجع الدالة صحيحًا إذا كان أحد مفاتيح العنصر على الأقل يطابق مصطلح البحث.

القضايا المعروفة

قم بإخفاء clearIcon إذا كان إدخال البحث فارغًا.

بشرط أن يكون لديك حزمة أيقونات مخصصة، ستفي طريقة التبديل القصيرة للخاصية بالغرض: clearIcon={this.state.searchTerm!==''&&<Icon name="x"/>} .

Fuse.js: مكون إضافي غير معروف "babel-plugin-add-module-exports"

أضف babel-plugin-add-module-exports باعتبارها تبعية للتطوير. فيوز.js #154.

npm i babel-plugin-add-module-exports babel-preset-es2015 babel-preset-stage-2 --save-dev

شكر وتقدير

enkidevs - مكون رد فعل بسيط لمدخلات البحث، مما يوفر وظيفة التصفية.