React Native 上下滚动水平移动

入门react-native第一个经常使用的动画,下图

实现步骤

• 判断 FlatList 或 ScrollView 是不是向上滚动或向下滚动
• 使用 React-Native 官网提供的 Animated 动画组件

一、ScrollView 判读用户滑动是不是向上滚动或向下滚动

这里用到两个触摸滚动事件
    onScrollBeginDrag : 开始滚动
    onScroll ：滚动时
复制代码

在一个onScrollBeginDrag回调方法（ScrollView开始拖动开始时触发）中记录event.nativeEvent.contentOffset.y：Y轴滚动的偏移量。 在onScroll滚动事件回调方法中判断当前contentOffset.y与记录的Y轴滚动的偏移量：

• 若记录的Y轴滚动的偏移量 < 当前contentOffset.y，则表示ScrollView在往下滚动
• 若记录的Y轴滚动的偏移量 > 当前contentOffset.y，则表示ScrollView在往上滚动。

示例代码

import React, {Component} from 'react';
import {
    Text,
    View,
    ScrollView,
    Animated
} from 'react-native';
 
const SCROLLVIEW_DIRECTION_UP = 0;     //表示ScrollView组件往上滚动
const SCROLLVIEW_DIRECTION_DOWN = 1;   //表示ScrollView组件往下滚动

export default class ScrollView extends Component {
    this.state ={
	    scrollViewStartOffsetY : 0,//用于记录手指开始滑动时ScrollView组件的Y轴偏移量，经过这个变量能够判断滚动方向
	    scrollViewScrollDirection : 0,   //ScrollView组件滚动的方向：0往上；1往下
    }
	
    /** * 滑动开始回调事件 * * 注意：当刚刚开始滑动时，event.nativeEvent.contentOffset.y仍然是上次滑动的值，没有变化 * * @param event * @private */
    onScrollBeginDrag = (event) => {
        console.log('event',event.nativeEvent.contentOffset.y)
        //event.nativeEvent.contentOffset.y表示Y轴滚动的偏移量
        const offsetY = event.nativeEvent.contentOffset.y;
        //记录ScrollView开始滚动的Y轴偏移量
        this.setState({
            scrollViewStartOffsetY : offsetY
        })
    };
    
    onScroll = (event) => {
        const offsetY = event.nativeEvent.contentOffset.y;
        if (this.state.scrollViewStartOffsetY > offsetY) {
        	//手势往下滑动，ScrollView组件往上滚动
        	console.log('手势往下滑动，ScrollView组件往上滚动');
        	this.setState({
        		scrollViewScrollDirection : SCROLLVIEW_DIRECTION_UP
        	})
        } else if (this.state.scrollViewStartOffsetY < offsetY) {
        	//手势往上滑动，ScrollView组件往下滚动
        	console.log('手势往上滑动，ScrollView组件往下滚动');
        	this.setState({
        		scrollViewScrollDirection : SCROLLVIEW_DIRECTION_DOWN
        	})
        }
    }
    
    render() {
        let list = (length) => {
            let res = [];
            for(var i = 0; i < length; i++) {
                res.push(<Text style={styles.TextStyle} key={i}>hello react</Text>)
            }
            return res
        }
        return (
            <View style={styles.container}>
                <ScrollView 
                        onScroll={this._onScroll}
                        onScrollBeginDrag={this._onScrollBeginDrag}>
                    <View style={styles.TextView}>
                        {
                            list(100)
                        }
                    </View>
                </ScrollView>
                <Animated.View  style={[styles.floatPad,{transform:[{translateX: this.state.translateX}]}]}>
                    <Icon name={'add'} size={30} color={'#fff'} style={styles.floatBottomIcon}/>
                </Animated.View>
            </View>
        )
    }
}
复制代码

二、这样就能够判断用户是不是向上或向下滑动了,接下来使用Animated

this.state = {
        translateX : new Animated.Value(0),
    }
    
    /** * @toValue 目标值 */
    Animated.spring(this.state.translateX,
    {
        toValue: 100,    //目标值
        velocity: 2,     //附着在弹簧上物体的初始速度。默认值0（对象处于静止状态）。
        tension: -10,    //控制速度。默认值40。
        friction: 3,     //控制“弹性”/过冲。默认值7。
    }).start();
    
    <Animated.View  style={[styles.floatPad,{transform:[{translateX: this.state.translateX}]}]}>
        <Icon name={'add'} size={30} color={'#fff'} style={styles.floatBottomIcon}/>
    </Animated.View>
复制代码