react-native - 使用 PanResponder React Native（版本 0.60.5）在 Tap 上将动画视图缩小到默认位置

Question

我想设计一个如下的屏幕：-

底部屏幕（通道）是垂直滑动的，当拖动开始时高度会增加。我可以用 panresonder 做到这一点，在垂直滑动后它将有一个全屏高度，里面会有一个滚动视图，但是当每当我点击这个屏幕时，当它的高度已满时，它就会缩小到原来的位置。

这是我写的代码：-

 componentWillMount() {
        this._panResponder = PanResponder.create({
            onMoveShouldSetPanResponder: (e, gestureState) => true,

    //When dragging the screen change the height 
            onPanResponderMove: (e, gestureState) => {
                    this.setState({
                        bottomHeight: gestureState.moveY > (this.state.deviceHeight - 40) ? 40 : this.state.deviceHeight - gestureState.moveY,
                    })


            },
// After reaching a certain height when releasing the finger make bottom screen full height.
                onPanResponderRelease: (e, gestureState) => {
                    if (gestureState.dy != 0) {
                        if (gestureState.dy < 0 && Math.abs(gestureState.dy) > 30) {
                            this.setState({
                                bottomHeight: this.state.deviceHeight - 200,
                                collapsed: false,
                                opacity: 0.7,
                                backgroundColor: '#191919'
                            })
                        } else if (gestureState.dy > 10) {
                            this.setState({
                                bottomHeight: 100,
                                collapsed: true,
                                opacity: 1,
                                backgroundColor: '#FFFFFF'
                            })
                        } else {
                            this.setState({
                                bottomHeight: this.state.deviceHeight - 200,
                                collapsed: false,
                                opacity: 0.7,
                                backgroundColor: '#191919'
                            })
                        }
                    }

                }
            });
        }

JSX 部分

<Animated.View
                style={{
                    borderTopWidth: 15,
                    borderTopColor: '#FFD200',
                    backgroundColor: '#FFFFFF',
                    position: 'absolute',
                    borderTopLeftRadius: 10,
                    borderTopRightRadius: 10,
                    bottom: 0,
                    left: 0,
                    right: 0,
                    minHeight: 150,
                    maxHeight: this.state.deviceHeight - 200,
                    height: this.state.bottomHeight
                }}
                {...this._panResponder.panHandlers}
            >



            </Animated.View>

我使用了 rn-sliding-up-panel库，但是当我拖动底部屏幕时，性能 ios 不太好，这就是我自己编写的原因。有没有办法忽略点击手势或任何其他方式来实现这一点。我对动画不太擅长，这方面的初学者，可能这个问题很傻。任何形式的帮助表示赞赏。

标签： react-native