1

我正在尝试实现Bottom draggable drawer你在Google Mapsor中找到的那个Apple Maps。

在此处输入图像描述

我从这里学习了一个教程：教程，但我仍然无法将我的组件移动到Y axis.

到目前为止，这是我的代码：

import React, { useRef } from 'react'
import { StyleSheet, View, Animated, PanResponder } from 'react-native'

import Colors from '../global/Colors'
import Constants from '../global/Constants'
import { BottomDrawerType } from '../global/Enumerations'

const BottomDrawerView = () => {
    const y = useRef(new Animated.Value(BottomDrawerType.Closed)).current
    const state = useRef(new Animated.Value(BottomDrawerType.Closed)).current
    const margin = 0.05 * Constants.Size.screenHeight

    /**
     * Functionalities 
     */

    const movementValue = (moveY) => Constants.Size.screenHeight - moveY

    const animateMove = (y, toValue, callback) => {
        Animated.spring(y, {
            toValue: -toValue,
            tension: 20,
            useNativeDriver: true,
        }).start((finished) => {
            finished && callback && callback()
        })
    }

    const getNextState = (
        currentState,
        val,
        margin,
    ) => {
        switch (currentState) {
            case BottomDrawerType.Peek:
                return val >= currentState + margin
                    ? BottomDrawerType.Open
                    : val <= BottomDrawerType.Peek - margin
                        ? BottomDrawerType.Closed
                        : BottomDrawerType.Peek;
            case BottomDrawerType.Open:
                return val >= currentState
                    ? BottomDrawerType.Open
                    : val <= BottomDrawerType.Peek
                        ? BottomDrawerType.Closed
                        : BottomDrawerType.Peek;
            case BottomDrawerType.Closed:
                return val >= currentState + margin
                    ? val <= BottomDrawerType.Peek + margin
                        ? BottomDrawerType.Peek
                        : BottomDrawerType.Open
                    : BottomDrawerType.Closed;
            default:
                return currentState;
        }
    }

    const onPanResponderMove = (PanResponderGestureState) => {
        const val = movementValue(PanResponderGestureState)
        animateMove(y, val)
    }

    const onPanResponderRelease = (PanResponderGestureState) => {
        
        const valueToMove = movementValue(PanResponderGestureState)
        const nextState = getNextState(state, valueToMove, margin)
        state.setValue(nextState)
        animateMove(y, nextState)
    }

    const onMoveShouldSetPanResponder = ( PanResponderGestureState) => Math.abs(PanResponderGestureState) >= 10

    const panResponder = useRef(
        PanResponder.create({
            onMoveShouldSetPanResponder,
            onStartShouldSetPanResponderCapture: onMoveShouldSetPanResponder,
            onPanResponderMove,
            onPanResponderRelease,
        }),
    ).current

    /**
     * UI
     */

    return (
        <Animated.View
            style={[styles.contentView, { transform: [{ translateY: y }] }]}
            {...panResponder.panHandlers}>
            <View style={styles.horizontalLine} />

        </Animated.View>
    )
}

const styles = StyleSheet.create({
    contentView: {
        position: 'absolute',
        bottom: -Constants.Size.screenHeight + 70,
        width: Constants.Size.screenWidth,
        height: Constants.Size.screenHeight,
        backgroundColor: Colors.turqoise,
        borderRadius: Constants.Layout.borderRadius,
    },
    horizontalLine: {
        marginTop: 25,
        marginBottom: 15,
        marginHorizontal: 0,
        height: 2,
        width: '100%',
        backgroundColor: Colors.main
    }
})

export default BottomDrawerView

而我BottomDrawerType的是这样的：

const BottomDrawerType = {
    Open: Constants.Size.screenHeight - 230,
    Peek: 230,
    Closed: 0
}

该组件作为UI，可以导入到另一个文件中，不会使应用程序崩溃，但可拖动操作不起作用。 在此处输入图像描述

有人可以帮助我更好地理解这一点Animations并帮助我使该组件可拖动吗？

请原谅我可能在代码中发现的任何错误。

4

0 回答 0