react native material design searchbar

反應本機材料設計搜尋欄

React Native Material Design 搜尋欄

設定

使用npm i -S react-native-material-design-searchbar從 npm 安裝 SearchBar 。然後，透過import SearchBar from 'react-native-material-design-searchbar'從應用程式的 JavaScript 檔案中需要它。該函式庫依賴react-native-vector-icons。請按照他們的安裝指南鏈接它。

用法

除高度外，所有道具都是可選的。

 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 套件中，並使其可供您的應用程式使用。

貢獻

歡迎貢獻。

執照

麻省理工學院