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
React Native 通告消息竖向轮播组件封装
最新推荐文章于 2022-08-04 14:46:41 发布
import React, {Component} from 'react'import { Text, View, Animated, Easing, StyleSheet,} from 'react-native'export default class ScrollVertical extends Component { static def
摘要由CSDN通过智能技术生成