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

API และการกำหนดค่า

คุณสมบัติ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
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	() => {}	กำหนดฟังก์ชันสำหรับปุ่มค้นหาบนแป้นพิมพ์บน Press
inputFocus	boolean	false	กำหนดว่าฟิลด์จะได้รับโฟกัสหรือไม่
returnKeyType	string	done	กำหนดว่าคีย์ส่งคืนควรมีลักษณะอย่างไร ค่าต่อไปนี้ใช้ได้กับทุกแพลตฟอร์ม: done , go , next , search , send

วิธีการ

filter([keys])

ส่งกลับฟังก์ชันที่สามารถใช้เพื่อกรองอาร์เรย์ คีย์สามารถเป็น string , [string] หรือ null

หากคีย์อาร์เรย์เป็นอาร์เรย์ ฟังก์ชันจะส่งกลับค่าจริงหากมีอย่างน้อยหนึ่งคีย์ของรายการตรงกับคำค้นหา

วิธีการแบบคงที่

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

ส่งกลับฟังก์ชันที่สามารถใช้เพื่อกรองอาร์เรย์ searchTerm อาจเป็น regex หรือ String คีย์สามารถเป็น string , [string] หรือ null

หากคีย์อาร์เรย์เป็นอาร์เรย์ ฟังก์ชันจะส่งคืนค่าเป็นจริงหากมีคีย์อย่างน้อยหนึ่งคีย์ของรายการตรงกับคำค้นหา

ปัญหาที่ทราบ

ซ่อน clearIcon หากอินพุตการค้นหาว่างเปล่า

หากคุณมีแพ็คเกจไอคอนที่กำหนดเอง วิธีการสลับสั้น ๆ สำหรับคุณสมบัติจะทำ: clearIcon={this.state.searchTerm!==''&&<Icon name="x"/>}

Fuse.js: ปลั๊กอินที่ไม่รู้จัก "babel-plugin-add-module-exports"

เพิ่ม babel-plugin-add-module-exports เป็นการพึ่งพา dev ฟิวส์ js #154

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

รับทราบ

enkidevs - ส่วนประกอบ react.js อย่างง่ายสำหรับการป้อนข้อมูลการค้นหา โดยมีฟังก์ชันตัวกรอง