本文主要介绍了react native 通告消息竖向轮播组件的封装，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
import react, {component} from 'react'
import {
text,
view,
animated,
easing,
stylesheet,
} from 'react-native'
export default class scrollvertical extends component {
static defaultprops = {
enableanimation: true,
};
constructor(props) {
super(props)
let translatevalue= new animated.valuexy({x: 0, y: 0})
translatevalue.addlistener(({x,y})=>{
// log('value',x,y)
})
this.state = {
translatevalue: translatevalue,
// 滚屏高度
scrollheight: this.props.scrollheight || 32,
// 滚屏内容
kb_content: [],
// animated.view 滚动到的 y轴坐标
kb_tempvalue: 0,
// 最大偏移量
kb_contentoffsety: 0,
// 每一次滚动切换之前延迟的时间
delay: this.props.delay || 500,
// 每一次滚动切换的持续时间
duration: this.props.duration || 500,
enableanimation: true,
}
}
render() {
return (
<view style={[styles.kbcontainer, {height: this.state.scrollheight}, this.props.kbcontainer]}>
{
this.state.kb_content.length !== 0 ?
<animated.view
style={[
{flexdirection: 'column'},
{
transform: [
{translatey: this.state.translatevalue.y}
]
}
]}>
{this.state.kb_content.map(this._createkbitem.bind(this))}
</animated.view> : null
}
</view>
)
}
componentwillreceiveprops(nextprops) {
log('componentwillreceiveprops', nextprops)
this.setstate({
enableanimation: nextprops.enableanimation?true:false
}, () => {
this.startanimation();
}
)
}
componentdidmount() {
log('componentdidmount')
let content = this.props.data || []
if (content.length !== 0) {
let h = (content.length + 1) * this.state.scrollheight
this.setstate({
kb_content: content.concat(content[0]),
kb_contentoffsety: h
})
// 开始动画
// this._startanimation()
this.startanimation();
}
}
_createkbitem(kbitem, index) {
return (
<view key={index}
style={[{justifycontent: 'center', height: this.state.scrollheight}, this.props.scrollstyle]}>
<text style={[styles.kb_text_c, this.props.textstyle]}>{kbitem.content}</text>
</view>
)
}
startanimation = () => {
if (this.state.enableanimation) {
if(!this.animation){
this.animation = settimeout(() => {
this.animation=null;
this._startanimation();
}, this.state.delay);
}
}
}
componentwillunmount() {
if (this.animation) {
cleartimeout(this.animation);
}
if(this.state.translatevalue){
this.state.translatevalue.removealllisteners();
}
}
_startanimation = () => {
this.state.kb_tempvalue -= this.state.scrollheight;
if (this.props.onchange) {
let index = math.abs(this.state.kb_tempvalue) / (this.state.scrollheight);
this.props.onchange(index<this.state.kb_content.length-1?index:0);
}
animated.sequence([
// animated.delay(this.state.delay),
animated.timing(
this.state.translatevalue,
{
isinteraction: false,
tovalue: {x: 0, y: this.state.kb_tempvalue},
duration: this.state.duration, // 动画持续的时间（单位是毫秒），默认为500
easing: easing.linear
}
),
])
.start(() => {
// 无缝切换
// log('end')
if (this.state.kb_tempvalue - this.state.scrollheight === -this.state.kb_contentoffsety) {
// 快速拉回到初始状态
this.state.translatevalue.setvalue({x: 0, y: 0});
this.state.kb_tempvalue = 0;
}
this.startanimation();
})
}
}
const styles = stylesheet.create({
kbcontainer: {
// 必须要有一个背景或者一个border，否则本身高度将不起作用
backgroundcolor: 'transparent',
overflow: 'hidden'
},
kb_text_c: {
fontsize: 18,
color: '#181818',
}
使用
import react, {component} from 'react';
import {
stylesheet,
view,
touchableopacity,
alert,
scrollview,
art,
touchablehighlight,
listview,
dimensions,
text
} from 'react-native';
import scrollvertical from '../../app-widget/scroll-vertical'
const dataarray = [
{
title: '降价了',
},
{
title: '全场五折',
},
{
title: '打到骨折',
}
]
export default class extends react.component {
render() {
let array = [{ content: '' }];
if (dataarray && dataarray.length > 0) {
array = [];
for (let item of dataarray) {
array.push({ content: item.title});
}
}
return (
<view style={{ padding: constant.sizemargindefault, paddingbottom: 0, backgroundcolor: '#ffffff' }}>
<touchableopacity onpress={() => {
if (dataarray && dataarray.length > 0) {
log(dataarray[this.index].title)
}
}} style={{ flexdirection: 'row', backgroundcolor: "#ffffff", alignitems: 'center', borderradius: 8, paddingleft: 5, paddingright: 5 }}>
<text style={{ fontsize: constant.scalefontsize(14) }} fontweight={'bold'}>公告</text>
<view style={{ marginleft: 5, marginright: 8, backgroundcolor: '#b01638', borderradius: 8, width: 22, alignitems: 'center', }}>
<text style={{ color: 'white', fontsize: constant.fontsizesmall }}>新</text>
</view>
<view style={{ flexdirection: 'row', flex: 1 }}>
<scrollvertical
onchange={(index => {
this.index = index;
})}
enableanimation={true}
data={array}
delay={2500}
duration={1000}
scrollheight={34}
scrollstyle={{ alignitems: 'flex-start' }}
textstyle={{ color: constant.colortxtcontent, fontsize: constant.fontsizesmall }} />
</view>
<view style={{ height: 14, width: 1, backgroundcolor: constant.colortxtcontent }} />
<text style={{ color: constant.colortxtcontent, paddingleft: constant.sizemargindefault, fontsize: constant.fontsizesmall }}>查看</text>
</touchableopacity>
</view>
);
}
};
相关推荐：
php通告栏有关问题
react native验证码倒计时分享
实例详解react native时间转换格式工具类
以上就是react native 通告消息竖向轮播组件的封装详解的详细内容。