Question

世界上许多伟大的开发人员都提供了许多示例，这些示例基于可滚动的滚动值来工作的可折叠标头。但是我正在尝试使用PanResponder来实现相同的功能。

这就是我要达到的imgur link

就React Native而言，如果我解释一下我们在图像中看到的屏幕组件，则在顶部是标题，然后是scrollView（让我们跳过目录痕迹）

最初，当屏幕渲染时，标题保持折叠状态，如果我们向下滑动屏幕，则标题将以弹性动画扩展，类似于向上滑动时，标题将返回具有动画的初始折叠状态。在标题折叠/展开期间，scrollView滚动将保持锁定状态，直到标题动画完成，即我们必须通过PanResponder跟踪手势。
如果我们将集管向上滑动到小于集管的50％的任何位置，则集管会弹回并展开，当从折叠状态滑落下来时，也会发生类似的反向情况。

最近几天，我进入了展开和折叠部分，但是现在我的背部靠在墙上，无法弄清标题动画的弹性效果，因此不胜感激

这是代码

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            pan: new Animated.ValueXY(),
            items: [1,2,3,4,5]
        };

        this.animY = new Animated.Value(0);
        this.lastY = 0;

        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

            onPanResponderGrant: (evt, gestureState) => {
            },
            onPanResponderMove: (evt, gestureState) => {
                let { dy } = gestureState;
                this.animY.setValue(this.lastY + dy);
              },
            onPanResponderTerminationRequest: (evt, gestureState) => true,
            onPanResponderRelease: (evt, gestureState) => {
                let { dy } = gestureState;
                this.lastY += dy;
            },
        });
    }

    handleScroll = () => {
        console.log('scroll init');
    }

    render() {
        this.state.pan.addListener((value) => {
            console.log('animY', this.animY);
        });

        const AnimateHeaderHeight = Animated.diffClamp(this.animY, -200, 0).interpolate(
        {
            inputRange: [ -200, 0 ],
            outputRange: [ 50, 200 ],
            extrapolate: 'clamp'
        });

        return (
            <View style={{flex: 1}}>
                <Animated.View style={[{backgroundColor: '#4287f5', height: AnimateHeaderHeight}]}>
                    <Text>Sample</Text>
                </Animated.View>
                <ScrollView style={{flex: 1, backgroundColor: '#e6efff'}}
                    onScroll={this.handleScroll}
                    {...this._panResponder.panHandlers}
                    scrollEnabled={false}
                >
                    {this.state.items.map((item, index) => {
                        return (
                            <View style={styles.item} key={index}>
                                <Text>Sample</Text>
                            </View>
                        )
                    })} 
                </ScrollView>
            </View>
        )
    }
};

这是我上面的代码的输出

使用PanResponder反应原生可折叠弹性标题

0 个答案: