react native dynamic search bar

Pemintal built-in

Versi 2.0?

Versi 2.0 ada di sini?

• Benar-benar ditulis ulang dari awal?
• Pengkodean yang jauh lebih baik untuk pemeliharaan dan lebih sedikit ketergantungan
• 3 dependensi dihapus?
• Manajemen prop yang lebih baik dan kustomisasi keren dimungkinkan sekarang
• Integrasi Mode Gelap?

Saya tidak sabar untuk melihat apa yang akan Anda buat dengan SearchBar ini?

Instalasi

Tambahkan ketergantungan:

Bereaksi asli

npm i react-native-dynamic-search-bar

npm i react-native-spinkit

npm i @freakycoder/react-native-bounceable

Versi Expo

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

npm i react-native-animated-spinkit

npm i @freakycoder/react-native-bounceable

Ketergantungan sebaya

PENTING! Anda perlu menginstalnya

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

Ketergantungan Peer Expo

PENTING! Anda perlu menginstalnya

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

Penggunaan

Impor

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

Penggunaan dasar

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

Penggunaan lanjutan

Anda dapat memeriksa contoh untuk penggunaan lanjutan

 < 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" ) }
/> 

Penggunaan pemintal built-in canggih

Anda dapat memeriksa contoh untuk penggunaan pemintal bawaan canggih

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

Konfigurasi - alat peraga

Milik	Jenis	Bawaan	Keterangan
gaya	View style	bawaan	atur atau angkanya objek gaya untuk tampilan pencarian utama
Darkmode	Boolean	PALSU	Aktifkan mode gelap
OnchangeText	fungsi	fungsi	Atur fungsi Anda sendiri untuk logika OnchangeText
Onpress	fungsi	fungsi	Atur fungsi Anda sendiri untuk fungsionalitas OnPress
OnSearchpress	fungsi	fungsi	Atur fungsi Anda sendiri untuk fungsionalitas OnPress Tombol Pencarian
OnClearpress	fungsi	fungsi	Atur fungsi Anda sendiri untuk fungsionalitas OnPress Tombol Clear
Onblur	fungsi	fungsi	Atur fungsi Anda sendiri untuk fungsionalitas Onblur input teks
Onfocus	fungsi	fungsi	Atur fungsi Anda sendiri untuk fungsionalitas Onblur input teks
TextInputStyle	TextStyle	bawaan	atur atau angkanya objek gaya untuk input teks
Searchiconimagestyle	Imagestyle	bawaan	atur atau angkanya objek gaya untuk gaya gambar ikon pencarian
Cleariconimagestyle	Imagestyle	bawaan	atur atau angkanya objek gaya untuk gaya gambar ikon yang jelas
Komponen imagec	komponen	Gambar	Atur komponen gambar Anda sendiri alih-alih gambar default asli React-asli
SearchIcOncomponent	komponen	bawaan	Atur komponen Anda sendiri, bukan ikon untuk komponen pencarian
ClearicOncomponent	komponen	bawaan	Atur komponen Anda sendiri, bukan ikon untuk komponen yang jelas
SearchiconimageSource	Isource	bawaan	Ubah Sumber Gambar Ikon Pencarian
CleariconimageSource	Isource	bawaan	Ubah sumber gambar ikon yang jelas
CleariconimageSource	Isource	bawaan	Ubah sumber gambar ikon yang jelas
placeholder	rangkaian	"Cari di sini ..."	Atur string pemegang placeholder Anda sendiri
PlaceholderTextColor	warna	belum diartikan	atur warna teks placeholder
SpinnerColor	warna	#fdfdfd	Ubah Warna Pemintal
berputar	nomor	bawaan	Ubah Ukuran Pemintal
SpinnerType	komponen	Lingkaran	Ubah tipe pemintal
spinnervisibility	Boolean	PALSU	Ubah visibilitas pemintal

Kompatibilitas Expo

Bilah pencarian dinamis dapat digunakan dengan Expo. Anda hanya perlu menambahkan ketergantungan rekan:

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

Masalah yang diketahui

Android

Ikon vektor tidak menunjukkan: o

-> Anda perlu menambahkan baris kode ini ke dalam App/Gradle

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

Animasi tidak bekerja pada android seperti contoh?

-> Anda perlu mengaktifkan Layoutimation Eksperimental di Android. Inilah cara melakukannya:

 import { UIManager } from 'react-native' ;

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

Peta jalan

• Sepenuhnya ditulis ulang dengan pengkodean yang lebih baik dan lebih sedikit ketergantungan
• Kode lengkap refactoring dengan naskah yang lebih baik
• LISENSI
• Tulis artikel tentang lib di medium
• Tantangan Typescript!
• Perbarui versi Expo ke fitur terbaru
• Penghapusan gaya bayangan bawaan
• Contoh pembungkus bayangan pada dokumentasi
• Contoh dan gif yang lebih baik

Pengarang

Freakycoder, [email protected]

Lisensi

React Native Dynamic Search Bar Library tersedia di bawah lisensi MIT. Lihat file lisensi untuk info lebih lanjut.