react native material design searchbar تحميل - react native material design searchbar تحميل كود المصدر

react native material design searchbar

شفرة المصدر الأخرى

1.0.0

تنزيل

رد فعل المواد الأصلية تصميم شريط البحث

رد فعل تصميم المواد الأصلية SearchBar

يثبت

قم بتثبيت SearchBar من npm باستخدام npm i -S react-native-material-design-searchbar . بعد ذلك، اطلبها من ملفات JavaScript في تطبيقك باستخدام import SearchBar from 'react-native-material-design-searchbar' . تعتمد هذه المكتبة على أيقونات ناقل التفاعل الأصلي. يرجى ربطه باتباع دليل التثبيت الخاص بهم.

الاستخدام

جميع الدعائم اختيارية باستثناء الارتفاع.

 import React , { Component } from 'react' ;
import SearchBar from 'react-native-material-design-searchbar' ;

export default class ExampleComponent extends Component {
  render ( ) {
    return (
      < SearchBar
        onSearchChange = { ( ) => console . log ( 'On Search Change' ) }
        height = { 50 }
        onFocus = { ( ) => console . log ( 'On Focus' ) }
        onBlur = { ( ) => console . log ( 'On Blur' ) }
        placeholder = { 'Search...' }
        autoCorrect = { false }
        padding = { 5 }
        returnKeyType = { 'search' }
      / >
    ) ;
  }
} ;

الدعائم المتاحة

onSearchChange : رد الاتصال عند تغيير البحث
onClear : رد الاتصال عند الضغط على الزر "X". وهذا أيضًا يستدعي onSearchChange بسلسلة فارغة.
searchValue : تهيئة حقل الإدخال. لا يؤدي تغيير هذه الدعامة إلى تغيير قيمة الإدخال.
onBackPress : وظيفة اختيارية، تم الضغط على أيقونة رد الاتصال
alwaysShowBackButton : منطقي اختياري، استخدمه إذا كنت تريد إظهار زر الرجوع دائمًا بدلاً من البحث، فالوضع الافتراضي هو false
iconCloseName : سلسلة اختيارية، استخدمها لتخصيص رمز الإغلاق
iconSearchName : سلسلة اختيارية، استخدمها لتخصيص أيقونة البحث
iconBackName : سلسلة اختيارية، استخدمها لتخصيص أيقونة الرجوع
iconCloseComponent : كائن اختياري، مكون مخصص لرمز الإغلاق (يتجاوز iconCloseName)
iconSearchComponent : كائن اختياري، مكون مخصص لرمز البحث (يتجاوز iconSearchName)
iconBackComponent : كائن اختياري، مكون مخصص للرمز الخلفي (يتجاوز IconBackName)
iconColor : سلسلة اختيارية، استخدمها لتحديد حجم حشو مختلف، الافتراضي هو #737373
placeholder : سلسلة اختيارية، استخدمها لتخصيص نص العنصر النائب، الافتراضي هو eSearch...
placeholderColor : سلسلة اختيارية، استخدمها لتحديد لون بديل مختلف، الافتراضي هو #bdbdbd
returnKeyType : سلسلة اختيارية، استخدمها لتخصيص نوع مفتاح الإرجاع
padding : سلسلة اختيارية، استخدمها لتحديد حجم حشو مختلف، الافتراضي هو 5
inputStyle : سلسلة اختيارية، استخدمها لتمرير النمط الخاص بك إلى View الذي يحتوي عليه
inputProps : كائن اختياري، استخدمه لتمرير دعائم إضافية إلى TextInput ، على سبيل المثال {autoFocus: true}
textStyle : سلسلة اختيارية، استخدمها لتمرير النمط الخاص بك إلى TextInput