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 包中，并使其可供您的应用程序使用。

贡献

欢迎贡献。

执照

麻省理工学院