react native實(shí)現(xiàn)監(jiān)控手勢上下拉動(dòng)效果
react native實(shí)現(xiàn)監(jiān)控手勢進(jìn)行上下拉動(dòng)效果,詳細(xì)核心代碼如下:
代碼:
import {PanResponder} from 'react-native'; var Dimensions = require('Dimensions'); const deviceHeight = Dimensions.get("window").height; const deviceWidth = Dimensions.get("window").width; class TaskfinishedPage extends Component { constructor(props) { super(props); console.disableYellowBox = true; this.state = { silderMargin: deviceHeight-230, }; this.lastY1 = this.state.silderMargin; } componentWillMount () { this._panResponder = PanResponder.create({ onStartShouldSetPanResponder: (evt, gestureState) => { return true; }, onMoveShouldSetPanResponder: (evt, gestureState) => { return true; }, onPanResponderGrant: (evt, gestureState) => { this._highlight(); }, onPanResponderMove: (evt, gestureState) => { console.log(`gestureState.dx : ${gestureState.dx} gestureState.dy : ${gestureState.dy}`); if(50<this.lastY1 + gestureState.dy&&this.lastY1 + gestureState.dy<deviceHeight-230){ this.setState({ // marginLeft1: this.lastX1 + gestureState.dx, silderMargin: this.lastY1 + gestureState.dy, }); } }, onPanResponderRelease: (evt, gestureState) => { this._unhighlight(); this.lastY1 = this.state.silderMargin; }, onPanResponderTerminate: (evt, gestureState) => { }, }); } //這兩個(gè)方法手觸摸以及離開時(shí)觸發(fā); _unhighlight(){ this.setState({ sliderBackgroundcolor: 'transparent', }); } _highlight(){ this.setState({ sliderBackgroundcolor: 'transparent', }); } render() { return ( <Container}> <Header> <Left> <Button transparent onPress={() => { NavigationUtil.resetGoBack(this.props.navigation); }}> <Icon name='arrow-back' style={{color:'#000'}}/> </Button> </Left> <Body > <Text style={{color:'#000'}}>Finshed任務(wù)詳情</Text> </Body> <Right /> </Header> <View style={{ flex: 1 }}> <View style={ [styles.panelView, { backgroundColor: this.state.sliderBackgroundcolor, marginTop: this.state.silderMargin, zIndex:100 } ]} {...this._panResponder.panHandlers} > </View> </View> </Container> ); } const styles = { panelView: { width: deviceWidth-20, height: 410, marginLeft:10, marginRight:10, borderRadius:6, } } export default TaskfinishedPage;
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React?中使用?RxJS?優(yōu)化數(shù)據(jù)流的處理方案
這篇文章主要為大家介紹了React?中使用?RxJS?優(yōu)化數(shù)據(jù)流的處理方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02React跨端動(dòng)態(tài)化之從JS引擎到RN落地詳解
這篇文章主要為大家介紹了React跨端動(dòng)態(tài)化之從JS引擎到RN落地,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09淺談React-router v6 實(shí)現(xiàn)登錄驗(yàn)證流程
本文主要介紹了React-router v6 實(shí)現(xiàn)登錄驗(yàn)證流程,主要介紹了公共頁面、受保護(hù)頁面和登錄頁面,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05React項(xiàng)目打包發(fā)布到Tomcat頁面空白問題及解決
這篇文章主要介紹了React項(xiàng)目打包發(fā)布到Tomcat頁面空白問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06React中Portals與錯(cuò)誤邊界處理實(shí)現(xiàn)
本文主要介紹了React中Portals與錯(cuò)誤邊界處理實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07React-Native TextInput組件詳解及實(shí)例代碼
這篇文章主要介紹了React-Native TextInput組件詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10