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不太好，这就是我自己编写它的原因。是否有任何方法可以忽略Tap手势或任何其他方法来实现此目的。我在动画方面不太好，对此还是初学者，可能这个问题很愚蠢。任何帮助都将受到赞赏。

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

0 个答案: