react native實現(xiàn)監(jiān)控手勢上下拉動效果
更新時間：2021年05月19日 14:45:35 作者：Smile沛沛
這篇文章主要為大家詳細介紹了react native實現(xiàn)監(jiān)控手勢上下拉動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
react native實現(xiàn)監(jiān)控手勢進行上下拉動效果,詳細核心代碼如下:
代碼：
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) => {
},
});
}
//這兩個方法手觸摸以及離開時觸發(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任務詳情</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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了React hooks異步操作踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了React源碼調(diào)試方式實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
React Native 集成jpush-react-native的示例代碼
這篇文章主要介紹了React Native 集成jpush-react-native的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細介紹了如何基于React實現(xiàn)倒計時功能,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下2024-02-02
react-router?重新加回跳轉(zhuǎn)攔截功能詳解
這篇文章主要為大家介紹了react-router?重新加回跳轉(zhuǎn)攔截功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
react代碼模式分為兩種類組件和函數(shù)組件(生命周期也有所不同),這篇文章主要介紹了react生命周期(類組件/函數(shù)組件),需要的朋友可以參考下2023-01-01
React應用框架Dva數(shù)據(jù)流向原理總結(jié)分析
這篇文章主要為大家介紹了React 應用框架Dva數(shù)據(jù)流向原理總結(jié)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
本篇文章主要介紹了React Native 截屏組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
react-native-tab-navigator組件的基本使用示例代碼
本篇文章主要介紹了react-native-tab-navigator組件的基本使用示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-09-09
react中如何對自己的組件使用setFieldsValue
react中如何對自己的組件使用setFieldsValue問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03