ดาวน์โหลด react native material design searchbar - ดาวน์โหลดแถบ react native material design searchbar ซอร์สโค้ด

react native material design searchbar

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

react-native-material-design-searchbar

React Native Material Design SearchBar

ตั้งค่า

ติดตั้ง SearchBar จาก npm ด้วย npm i -S react-native-material-design-searchbar จากนั้นเรียกข้อมูลจากไฟล์ JavaScript ของแอปด้วย import SearchBar from 'react-native-material-design-searchbar' ไลบรารีนี้ขึ้นอยู่กับ react-native-vector-icon โปรดเชื่อมโยงโดยทำตามคำแนะนำการติดตั้ง

การใช้งาน

อุปกรณ์ประกอบฉากทั้งหมดเป็นทางเลือก ยกเว้นความสูง

 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 : ฟังก์ชั่นเสริม, กดไอคอน Callback ที่ด้านหลัง
alwaysShowBackButton : บูลเสริม ใช้ถ้าคุณต้องการแสดงปุ่มย้อนกลับแทนการค้นหาเสมอ ค่าเริ่มต้นคือ false
iconCloseName : สตริงทางเลือก ใช้เพื่อปรับแต่งไอคอนปิด
iconSearchName : สตริงทางเลือก ใช้เพื่อปรับแต่งไอคอนการค้นหา
iconBackName : สตริงทางเลือก ใช้เพื่อปรับแต่งไอคอนด้านหลัง
iconCloseComponent : วัตถุเสริม องค์ประกอบที่กำหนดเองสำหรับไอคอนปิด (แทนที่ iconCloseName)
iconSearchComponent : ออบเจ็กต์ทางเลือก ส่วนประกอบที่กำหนดเองสำหรับไอคอนการค้นหา (แทนที่ iconSearchName)
iconBackComponent : ออบเจ็กต์เสริม ส่วนประกอบที่กำหนดเองสำหรับไอคอนด้านหลัง (แทนที่ iconBackName)
iconColor : สตริงเสริม ใช้เพื่อกำหนดขนาดช่องว่างภายในอื่น ค่าเริ่มต้นคือ #737373
placeholder : สตริงทางเลือก ใช้เพื่อปรับแต่งข้อความ placeholder ค่าเริ่มต้นคือ eSearch...
placeholderColor : สตริงทางเลือก ใช้เพื่อกำหนดสีตัวยึดตำแหน่งอื่น ค่าเริ่มต้นคือ #bdbdbd
returnKeyType : สตริงทางเลือก ใช้เพื่อปรับแต่งประเภทคีย์ส่งคืน
padding : สตริงเสริม ใช้เพื่อกำหนดขนาด padding อื่น ค่าเริ่มต้นคือ 5
inputStyle : สตริงทางเลือก ใช้เพื่อส่งสไตล์ของคุณไปยัง View ที่มี
inputProps : วัตถุเสริม ใช้เพื่อส่งอุปกรณ์ประกอบฉากเพิ่มเติมไปยัง TextInput เช่น {autoFocus: true}
textStyle : สตริงทางเลือก ใช้เพื่อส่งสไตล์ของคุณไปยัง TextInput