Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-native-noticebar-typescript

1.0.1 • Public • Published

react-native-noticebar-typescript

React Native NoticeBar 竖向滚动通知栏、公告栏

install 使用

$ npm i react-native-noticebar-typescript
$ yarn add react-native-noticebar-typescript

Usage

import NoticeBar from 'react-native-noticebar-typescript'

class Demo extends Component<props, state> {
  constructor(props) {
    super(props)
    this.state = {
      noticeList: [
        {
          id: 1,
          title: '张三!!!'
        },
        {
          id: 2,
          title: '李四!!!'
        }
      ]
    }
  }

  // noticebar change event
  onChange = (index) => {
    console.log(`Current index is ${index}.` )
  }

  // render item
  renderItem = (item:any, index:number) => {
    return (
      <View>
        <Text numberOfLines={1}>{item.title}</Text>
      </View>
    )
  }

  render() {
    return (
      <View>
        <NoticesBar
          data={noticeList}
          delay={3000}
          duration={500}
          scrollHeight={28}
          onChange={this.onChange.bind(this)}
          renderItem={this.renderItem.bind(this)}
        />
      </View>
    )
  }
}

Props

Prop Default Type Description
data require { items: any[] }[] the data list
scrollHeight require number Height of the single Bar
renderItem require React.ReactNode
containerStyle StyleProp Bar wrap's style
leftIcon React.ReactNode
rightIcon React.ReactNode
paddingLeft 0 number From the left
delay 3000 number Animation delay time
duration 500 number Duration of each rolling switch
onChange (index: number) => void; Callback when noticebar has changed
enableAnimation true boolean Animation switch

如果问题请联系 fwf1024@163.com

Install

npm i react-native-noticebar-typescript

DownloadsWeekly Downloads

1

Version

1.0.1

License

ISC

Unpacked Size

8.41 kB

Total Files

3

Last publish

Collaborators

  • avatar