有一個需求甩十，是需要上滑大于二分之一屏幕濒募，動畫展示全屏并跳轉(zhuǎn)新頁面巧骚，上滑小于二分之一屏幕時赊颠，動畫回退到之前的默認(rèn)高度布局。
于是采用了手勢+動畫完成劈彪，如下的效果：

上拉.gif

實際代碼：

/**
 * 上滑全屏demo
 */
import React from "react"
import { Component } from 'react'
import { View, Text, Animated, PanResponder, Dimensions } from "react-native"

export default class SlideUpFullScreenDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            height: new Animated.Value(100)
        }
    }

    componentWillMount() {
        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onPanResponderMove: this.onPanResponderMove,
            onPanResponderRelease: this._handlePanResponderEnd
        });
    }

    onPanResponderMove = (evt, gestureState) => {
        if (gestureState.dy < 0) {
            console.log('onPanResponderMove zyx dx', gestureState.dx)
            console.log('onPanResponderMove zyx dy', gestureState.dy)
            let height = -gestureState.dy
            Animated.spring(
                this.state.height,
                {
                    toValue: height + 100
                }
            ).start()
        }
    }

    _handlePanResponderEnd = (e, gestureState) => {
        if (gestureState.dy < 0) {
            // 執(zhí)行向上移動畫
            let height = -gestureState.dy
            console.log('_handlePanResponderEnd zyx dx', gestureState.dx)
            console.log('_handlePanResponderEnd zyx dy', gestureState.dy)
            if (height > Dimensions.get('window').height / 2) {
                height = Dimensions.get('window').height
            } else {
                height = 100
            }
            Animated.spring(
                this.state.height,
                {
                    toValue: height
                }
            ).start()
        }
    }

    render() {
        return (
            <View style={{ height: Dimensions.get('window').height, flexDirection: 'column-reverse', flex: 1 }}>
                <Animated.View
                    {...this._panResponder.panHandlers}
                    style={{
                        backgroundColor: 'red',
                        width: Dimensions.get('window').width,
                        height: this.state.height,
                        position: 'absolute',
                        top: (Dimensions.get('window').height - this.state.height)
                    }} >
                    <Text style={{ color: 'white', fontSize: 23 }}>hello wolrd</Text>
                </Animated.View>
            </View>
        )
    }
}