mCloud Design Mobile

mCloud Design Mobile

  • Docs
  • API
  • Help
  • Blog

›Component

Component

  • Button
  • SegmentedControl
  • SearchBar
  • Radio
  • Checkbox
  • Badge
  • Marquee
  • Switch
  • InputItem
  • NoticeBar
  • Textarea
  • List
  • Card
  • Picker
  • Label
  • EmptyView
  • Stepper
  • Tabs
  • DatePicker
  • Modal
  • Avatar
  • ActionSheet
  • ShareSheet

First Category

  • Button
  • Fifth Document

SearchBar

搜索栏

Basic Example

import React, { useState } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { SearchBar } from 'mcloud-mobile';

export default () => {
    const [value, onChange] = useState('打卡助手')
    return (
        <View style={styles.wrap}>
            <Text style={styles.boldTitle}>
                圆角搜索框
            </Text>
            <Text style={styles.title}>
                未输入状态
            </Text>
            <SearchBar type="radius" placeholder="搜索" />
            <Text style={styles.title}>
                初始值
            </Text>
            <SearchBar type="radius" defaultValue="打卡助手" />
            <Text style={styles.boldTitle}>
                通栏搜索框
            </Text>
            <Text style={styles.title}>
                初始值
            </Text>
            <SearchBar defaultValue="打卡助手" />
            <Text style={styles.title}>
                受控
            </Text>
            <SearchBar
                value={value}
                placeholder="搜索"
                onSubmit={(val) => console.log(val)}
                onCancel={() => onChange('')}
                onChange={(val) => onChange(val)}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    wrap: {
        flex: 1,
        backgroundColor: '#E6E6E6',
    },
    title: {
        fontSize: 14,
        color: '#1F2530',
        paddingVertical: 10,
        paddingLeft: 15,
    },
    boldTitle: {
        fontSize: 16,
        color: '#1F2530',
        paddingVertical: 10,
        paddingLeft: 10,
        fontWeight: '500',
    },
})

Props

属性说明类型默认值
defaultValue默认值String无
value当前值String无
placeholder输入文本之前呈现的的提示信息String无
placeholderTextColorplaceholderTextColorStringtheme.color_text_placeholder
onSubmitsubmit 事件的回调(val: String): void无
onChangechange 事件的回调(val: String): void无
onFocusfocus 事件的回调(val: String): void无
onBlurblur 事件的回调(val: String): void无
onClear清除事件的回调(val: String): void无
type默认样式(default)、圆角样式(radius)Stringdefault
renderClear自定义清除按钮ReactNodeclear Image
renderSearch自定义搜索放大镜ReactNodesearch Image
← SegmentedControlRadio →
  • Basic Example
  • Props
mCloud Design Mobile
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Facebook Open Source
Copyright © 2019 Your Name or Your Company Name