react native material design searchbar

панель поиска реагирующего нативного материала-дизайна

Панель поиска в React Native Material Design

Настраивать

Установите 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

Упаковщик React включит компонент SearchBar в JS-пакет вашего приложения и сделает его доступным для использования вашим приложением.

Содействие

Взносы приветствуются.

ЛИЦЕНЗИЯ

Массачусетский технологический институт