ReactNative手势上滑隐藏下滑显示

本文主要是介绍ReactNative手势上滑隐藏下滑显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、实现效果

二、实现方式

1 使用RN的panResponder组件来实现手势滑动

2 在constructor中初始可变组件的属性值和stytle

    constructor(props) {super(props);this.thresholdMin = 5;this.thresholdMax = 20;this.sapceInitHeight = 130;this.spaceHeight = 130;this.imageInitHeight = 61;this.imageHeight = 61;this.imageInitOpacity = 1;this.imageOpacity = 1;this._spaceStyles = {};this.space = (null: ?{ setNativeProps(props: Object): void });this._imageStyles = {};this.image = (null: ?{ setNativeProps(props: Object): void });this.show = true;}

3 在render中绑定this._panResponder手势处理handler，并通过ref关联组件对应的stytle

    render() {return (<View style={styles.container} {...this._panResponder.panHandlers}><View style={styles.space}ref={(space) => {this.space = space;}}><Image style={styles.image}ref={(image) => {this.image = image;}}source={

这篇关于ReactNative手势上滑隐藏下滑显示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---