react native dynamic search bar

สปินเนอร์ในตัว

เวอร์ชัน 2.0?

เวอร์ชัน 2.0 อยู่ที่นี่?

• เขียนใหม่ใหม่ตั้งแต่เริ่มต้น?
• การเข้ารหัสที่ดีกว่ามากสำหรับการบำรุงรักษาและการพึ่งพาน้อยกว่า
• 3 การพึ่งพาจะถูกลบออก?
• การจัดการเสาที่ดีขึ้นและการปรับแต่งที่ยอดเยี่ยมในขณะนี้
• การรวมโหมดมืด?

ฉันแทบรอไม่ไหวที่จะเห็นสิ่งที่คุณจะทำกับ SearchBar นี้?

การติดตั้ง

เพิ่มการพึ่งพา:

ตอบสนองพื้นเมือง

npm i react-native-dynamic-search-bar

npm i react-native-spinkit

npm i @freakycoder/react-native-bounceable

เวอร์ชัน Expo

npm i WrathChaos/react-native-dynamic-search-bar#expo

npm i react-native-animated-spinkit

npm i @freakycoder/react-native-bounceable

การพึ่งพาเพียร์

สำคัญ! คุณต้องติดตั้งพวกเขา

 "react-native-spinkit" : ">= 1.5.0" ,
"@freakycoder/react-native-bounceable" : ">= 0.2.2" , 

Expo Peer Dependencies

สำคัญ! คุณต้องติดตั้งพวกเขา

 "react-native-animated-spinkit" : ">= 1.5.0" ,
"@freakycoder/react-native-bounceable" : ">= 0.2.2" ,

การใช้งาน

นำเข้า

 import SearchBar from "react-native-dynamic-search-bar" ; 

การใช้งานขั้นพื้นฐาน

 < SearchBar
  placeholder = "Search here"
  onPress = { ( ) => alert ( "onPress" ) }
  onChangeText = { ( text ) => console . log ( text ) }
/> 

การใช้งานขั้นสูง

คุณสามารถตรวจสอบตัวอย่างสำหรับการใช้งานขั้นสูง

 < SearchBar
  fontColor = "#c6c6c6"
  iconColor = "#c6c6c6"
  shadowColor = "#282828"
  cancelIconColor = "#c6c6c6"
  backgroundColor = "#353d5e"
  placeholder = "Search here"
  onChangeText = { ( text ) => this . filterList ( text ) }
  onSearchPress = { ( ) => console . log ( "Search Icon is pressed" ) }
  onClearPress = { ( ) => this . filterList ( "" ) }
  onPress = { ( ) => alert ( "onPress" ) }
/> 

การใช้สปินเนอร์ในตัวขั้นสูง

คุณสามารถตรวจสอบตัวอย่างสำหรับการใช้งานสปินเนอร์ในตัวขั้นสูง

 import React , { Component } from "react" ;
import { View } from "react-native" ;
import SearchBar from "react-native-dynamic-search-bar" ;

export default class Test extends Component {
  handleOnChangeText = ( text ) => {
    // ? Visible the spinner
    this . setState ( {
      searchText : text ,
      spinnerVisibility : true ,
    } ) ;

    // ? After you've done to implement your use-case
    // ? Do not forget to set false to spinner's visibility
    this . setState ( {
      spinnerVisibility : false ,
    } ) ;
  } ;

  render ( ) {
    const { spinnerVisibility } = this . state ;
    return (
      < View >
        < SearchBar
          height = { 50 }
          fontSize = { 24 }
          fontColor = "#fdfdfd"
          iconColor = "#fdfdfd"
          shadowColor = "#282828"
          cancelIconColor = "#fdfdfd"
          backgroundColor = "#ba312f"
          spinnerVisibility = { spinnerVisibility }
          placeholder = "Search any cosmetics ..."
          fontFamily = "BurbankBigCondensed-Black"
          shadowStyle = { styles . searchBarShadowStyle }
          onChangeText = { this . handleOnChangeText }
        />
      </ View >
    ) ;
  }
}

การกำหนดค่า - อุปกรณ์ประกอบฉาก

คุณสมบัติ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
สไตล์	ViewStyle	ค่าเริ่มต้น	ตั้งค่าหรือแทนที่วัตถุสไตล์สำหรับมุมมองการค้นหาหลัก
Darkmode	บูลีน	เท็จ	เปิดใช้งานโหมดมืด
onchangetext	การทำงาน	การทำงาน	ตั้งค่าฟังก์ชั่นของคุณเองสำหรับ onchangetext logic
onpress	การทำงาน	การทำงาน	ตั้งค่าฟังก์ชั่นของคุณเองสำหรับฟังก์ชั่น onpress
Onsearchpress	การทำงาน	การทำงาน	ตั้งค่าฟังก์ชั่นของคุณเองสำหรับฟังก์ชั่น OnPress ของปุ่ม ค้นหา
onclearpress	การทำงาน	การทำงาน	ตั้งค่าฟังก์ชั่นของคุณเองสำหรับฟังก์ชั่น OnPress ของปุ่ม Clear
onblur	การทำงาน	การทำงาน	ตั้งค่าฟังก์ชั่นของคุณเองสำหรับฟังก์ชั่น onblur ของอินพุตข้อความ
onfocus	การทำงาน	การทำงาน	ตั้งค่าฟังก์ชั่นของคุณเองสำหรับฟังก์ชั่น onblur ของอินพุตข้อความ
TextInputStyle	สไตล์ข้อความ	ค่าเริ่มต้น	ตั้งค่าหรือแทนที่วัตถุสไตล์สำหรับอินพุตข้อความ
searchiconimagestyle	จินตนาการ	ค่าเริ่มต้น	ตั้งค่าหรือแทนที่วัตถุสไตล์สำหรับรูปแบบภาพไอคอนการค้นหา
Cleariconimagestyle	จินตนาการ	ค่าเริ่มต้น	ตั้งค่าหรือแทนที่วัตถุสไตล์สำหรับสไตล์ภาพไอคอนที่ชัดเจน
imageComponent	ส่วนประกอบ	ภาพ	ตั้งค่าส่วนประกอบรูปภาพของคุณเองแทนภาพเริ่มต้นของ React-Native
searchiconComponent	ส่วนประกอบ	ค่าเริ่มต้น	ตั้งค่าส่วนประกอบของคุณเองแทนไอคอนสำหรับส่วนประกอบ การค้นหา
cleariconcomponent	ส่วนประกอบ	ค่าเริ่มต้น	ตั้งค่าส่วนประกอบของคุณเองแทนไอคอนสำหรับส่วนประกอบ ที่ชัดเจน
searchiconimagesource	แหล่งที่มา	ค่าเริ่มต้น	เปลี่ยนแหล่งที่มาของภาพไอคอนการค้นหา
Cleariconimagesource	แหล่งที่มา	ค่าเริ่มต้น	เปลี่ยนแหล่งภาพไอคอนที่ชัดเจน
Cleariconimagesource	แหล่งที่มา	ค่าเริ่มต้น	เปลี่ยนแหล่งภาพไอคอนที่ชัดเจน
ผู้ถือครองตำแหน่ง	สาย	"ค้นหาที่นี่ ... "	ตั้งค่าสตริงตัวยึดตำแหน่งของคุณเอง
PlaceHolderTextColor	สี	ไม่ได้กำหนด	กำหนดสีข้อความตัวยึดตำแหน่ง
สปินเนอร์สี	สี	#FDFDFD	เปลี่ยนสีสปินเนอร์
ทำให้เป็นปั่นป่วน	ตัวเลข	ค่าเริ่มต้น	เปลี่ยนขนาดสปินเนอร์
สปินเนอร์ไทป์	ส่วนประกอบ	วงกลม	เปลี่ยนประเภทสปินเนอร์
ความสามารถในการใช้สปินเนอร์	บูลีน	เท็จ	เปลี่ยนทัศนวิสัยของสปินเนอร์

ความเข้ากันได้ของงานแสดงสินค้า

แถบการค้นหาแบบไดนามิกสามารถใช้งานได้กับ Expo คุณเพียงแค่ต้องเพิ่มการพึ่งพาเพื่อน:

 "react-native-dynamic-vector-icons" : "WrathChaos/react-native-dynamic-vector-icons#expo" 

ปัญหาที่รู้จัก

Android

ไอคอนเวกเตอร์ไม่แสดง: O

-> คุณต้องเพิ่มรหัสบรรทัดนี้ลงในแอป/Gradle

 apply from : "../../node_modules/react-native-vector-icons/fonts.gradle" 

ภาพเคลื่อนไหวไม่ทำงานบน Android เหมือนตัวอย่าง?

-> คุณต้องเปิดใช้งานเลย์เอวทดลองบน Android นี่คือวิธีการทำ:

 import { UIManager } from 'react-native' ;

constructor ( ) {
    super ( ) ;
    if ( Platform . OS === 'android' ) {
      UIManager . setLayoutAnimationEnabledExperimental && UIManager . setLayoutAnimationEnabledExperimental ( true ) ;
    }
}

แผนงาน

• เขียนใหม่อย่างสมบูรณ์ด้วยการเข้ารหัสที่ดีขึ้นและการพึ่งพาน้อยลง
• การปรับเปลี่ยนรหัสเต็มด้วย typescript ที่ดีกว่า
• ใบอนุญาต
• เขียนบทความเกี่ยวกับ lib บนสื่อ
• TypeScript Challenge!
• อัปเดตเวอร์ชัน Expo เป็นคุณสมบัติล่าสุด
• การกำจัดสไตล์เงาในตัว
• Wrapper Shadow ตัวอย่างในเอกสารประกอบ
• ตัวอย่างที่ดีกว่าและ gifs

ผู้เขียน

freakycoder, [email protected]

ใบอนุญาต

React Native Dynamic Search Bar Library มีอยู่ภายใต้ใบอนุญาต MIT ดูไฟล์ใบอนุญาตสำหรับข้อมูลเพิ่มเติม