react native dynamic search bar
New tsconfig file is here ?
 |  |
الإصدار 2.0 هنا؟
لا استطيع الانتظار لمعرفة ما ستصنعه مع SearchBar هذا؟
أضف التبعية:
npm i react-native-dynamic-search-barnpm i react-native-spinkitnpm i @freakycoder/react-native-bounceablenpm i WrathChaos/react-native-dynamic-search-bar#exponpm i react-native-animated-spinkitnpm i @freakycoder/react-native-bounceable "react-native-spinkit" : ">= 1.5.0" ,
"@freakycoder/react-native-bounceable" : ">= 0.2.2" , "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 |
| onpress | وظيفة | وظيفة | اضبط وظيفتك الخاصة لوظيفة OnPress |
| onSearchPress | وظيفة | وظيفة | قم بتعيين وظيفتك الخاصة لوظيفة OnPress الخاصة بزر البحث |
| onclearpress | وظيفة | وظيفة | قم بتعيين وظيفتك الخاصة لوظيفة OnPress الخاصة بزر Clear |
| Onblur | وظيفة | وظيفة | قم بتعيين وظيفتك الخاصة لوظيفة OnBlur الخاصة بإدخال النص |
| onfocus | وظيفة | وظيفة | قم بتعيين وظيفتك الخاصة لوظيفة OnBlur الخاصة بإدخال النص |
| TextInputStyle | TextStyle | تقصير | قم بتعيين أو تجاوز كائن النمط لإدخال النص |
| SearchOnimagestyle | الخيال | تقصير | قم بتعيين أو تجاوز كائن النمط لأسلوب صورة أيقونة البحث |
| cleariconimagestyle | الخيال | تقصير | قم بتعيين أو تجاوز كائن النمط لأسلوب صورة الرمز الواضح |
| ImageComponent | عنصر | صورة | اضبط مكون الصور الخاص بك بدلاً من الصورة الافتراضية لـ React-Native One |
| SearchicOncomponent | عنصر | تقصير | اضبط المكون الخاص بك بدلاً من أيقونة مكون البحث |
| cleariconcomponent | عنصر | تقصير | اضبط المكون الخاص بك بدلاً من أيقونة للمكون الواضح |
| SearchicOnimagesource | isource | تقصير | قم بتغيير مصدر صورة أيقونة البحث |
| ClearIconimagesource | isource | تقصير | قم بتغيير مصدر صورة الرمز الواضح |
| ClearIconimagesource | isource | تقصير | قم بتغيير مصدر صورة الرمز الواضح |
| عنصر نائب | خيط | "ابحث هنا ..." | اضبط سلسلة العنصر النائب الخاص بك |
| حامل النائب | لون | غير محدد | اضبط لون النص النائب |
| SpinnerColor | لون | #FDFDFD | تغيير لون الدوار |
| الدوار | رقم | تقصير | تغيير حجم الدوار |
| spinnertype | عنصر | دائرة | تغيير نوع الدوار |
| spinnervibility | منطقية | خطأ شنيع | تغيير رؤية الدوار |
شريط البحث الديناميكي قابل للاستخدام مع المعرض. تحتاج فقط إلى إضافة تبعية الأقران:
"react-native-dynamic-vector-icons" : "WrathChaos/react-native-dynamic-vector-icons#expo" -> تحتاج إلى إضافة هذا السطر من التعليمات البرمجية إلى التطبيق/Gradle
apply from : "../../node_modules/react-native-vector-icons/fonts.gradle" -> تحتاج إلى تمكين التصميم التجريبي على Android. إليكم كيفية القيام بذلك:
import { UIManager } from 'react-native' ;
constructor ( ) {
super ( ) ;
if ( Platform . OS === 'android' ) {
UIManager . setLayoutAnimationEnabledExperimental && UIManager . setLayoutAnimationEnabledExperimental ( true ) ;
}
}FreakyCoder ، [email protected]
React Native Dynamic Search Bar متوفرة ضمن ترخيص معهد ماساتشوستس للتكنولوجيا. انظر ملف الترخيص لمزيد من المعلومات.
