「React Native」上滑全屏

有一个需求，是需要上滑大于二分之一屏幕，动画展示全屏并跳转新页面，上滑小于二分之一屏幕时，动画回退到之前的默认高度布局。
于是采用了手势+动画完成，如下的效果：

上拉.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) {
            // 执行向上移动画
            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>
        )
    }
}