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

NoticeBar

提示信息组件

Basic Example:

import React from 'react'
import { View } from 'react-native'
import { NoticeBar } from 'mcloud-mobile'

const apiText = 'Some very long text needed scroll to view all of them and loop over.'

export default class NoticeBarDemo extends React.Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <NoticeBar text={apiText} />
                <NoticeBar
                    text={apiText}
                    style={{ marginTop: 20 }}
                    closeType="close"
                />
                <NoticeBar
                    text={apiText}
                    style={{ marginTop: 20 }}
                    closeType="never"
                    neverShowKey="neverShowApiText"
                />
                <NoticeBar
                    text={apiText}
                    marquee={true}
                    style={{ marginTop: 20 }}
                    closeType="close"
                />
            </View>
        )
    }
}

Props:

属性说明类型默认值
textStyle文字样式object
iconLeft是否显示左侧图标booleantrue
iconSource图标资源any
numberOfLines行数number1
marquee是否单行滚动booleanfalse
marqueeProps滚动属性object
closeType关闭方式'none','close','never'string'none'
closeStyle关闭按钮样式object
text提示信息内容string''
onDismiss关闭回调functionnull
neverShowKey不再提示的本地存储Key值string'NeverShow'
← InputItemTextarea →
  • 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