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