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>
複製代碼