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

Выставка версия

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" , 

Экспо -зависимости сверстников

ВАЖНЫЙ! Вам нужно установить их

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

Конфигурация - реквизит

Свойство	Тип	По умолчанию	Описание
стиль	Просмотр	по умолчанию	Установить или переопределить объект стиля для основного представления поиска
темная мода	логический	ЛОЖЬ	Включить темный режим
OnChangeText	функция	функция	Установите свою собственную функцию для логики OnChangeText
нанесение	функция	функция	Установите свою собственную функцию для функциональности Onpress
OnSearchPress	функция	функция	Установите свою собственную функцию для функциональности кнопки поиска
Onclearpress	функция	функция	Установите свою собственную функцию для функциональности кнопки прозрачной кнопки
Онблур	функция	функция	Установите свою собственную функцию для функциональности ввода ввода текста
Onfocus	функция	функция	Установите свою собственную функцию для функциональности ввода ввода текста
TextInputStyle	Текстовый стиль	по умолчанию	Установить или переопределить объект стиля для ввода текста
Searchiconimagestyle	Образец	по умолчанию	Установите или переопределите объект стиля для стиля изображения значка поиска
Cleariconimagestyle	Образец	по умолчанию	Установите или переопределите объект стиля для стиля Image Clear
ImageComponent	компонент	Изображение	Установите свой собственный компонент изображения вместо изображения по умолчанию от реагирования.
SearchIconComponent	компонент	по умолчанию	Установите свой собственный компонент вместо значка для компонента поиска
ClearicOncomponent	компонент	по умолчанию	Установите свой собственный компонент вместо значка для прозрачного компонента
Searchiconimagesource	Isource	по умолчанию	Измените источник изображения значка поиска
ClearicOnimagesource	Isource	по умолчанию	Изменить источник изображения Clear Icon
ClearicOnimagesource	Isource	по умолчанию	Изменить источник изображения Clear Icon
заполнитель	нить	"Поиск здесь ..."	Установите свою собственную строку заполнителя
PlaceholderTextColor	цвет	неопределенный	установить цвет текста заполнителя
SpinnerColor	цвет	#fdfdfd	изменить цвет спиннера
Spinnersize	число	по умолчанию	Измените размер спиннера
Спиннертип	компонент	Круг	Измените тип спиннера
Spinnervisibility	логический	ЛОЖЬ	изменить видимость спиннера

Экспо совместимость

Динамическая строка поиска можно использовать с 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 ) ;
    }
}

Дорожная карта

• Полностью переписано с лучшим кодированием и меньшей зависимостью
• Полный кодовый рефакторинг с помощью лучшего типового произведения
• ЛИЦЕНЗИЯ
• Напишите статью о LIB на среде
• TypeScript Challenge!
• Обновите версию Expo до последних функций
• Встроенное удаление стиля тени
• Пример тени обертки в документации
• Лучший пример и гифки

Автор

Freakycoder, [email protected]

Лицензия

React Native Dynamic Bar Library доступна по лицензии MIT. Смотрите файл лицензии для получения дополнительной информации.