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

如果问题请联系 [e-mail]