react-native上下滚动组件封装

淡淡的烟草味﹌ 2022-05-04 04:28 306阅读 0赞

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’,  
\}  
\});

![新建一个文件把代码拷进去，用的时候参照下][70]  
新建一个文件把代码拷进去，用的时候参照下面

[70]: /images/20220504/08f56cdd579e4074aa21991f71f8f372.png