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) {
this.setState({
enableAnimation: nextProps.enableAnimation?true:false
}, () => {
this.startAnimation();
}
)
}
componentDidMount() {
let content = this.props.data || [];
console.log("========================");
console.log(content);
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
numberOfLines={1}
ellipsizeMode='tail'
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(() => {
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’,
}
});
新建一个文件把代码拷进去,用的时候参照下面