我正在尝试在 React Native 中使用 PanResponder。
非常简单 - 我有 2 个元素:
- 一个View,它是屏幕的宽度和100的高度。
- 一个 Animated.View,宽度为 50,高度为 50,borderRadius 为 25,因此它是一个圆形。该圆圈位于主视图内。
我希望能够有效地在屏幕上拖动圆圈。有人可以帮我吗?
这是迄今为止我的代码:
import React from 'react';
import { Animated, Dimensions, PanResponder, StyleSheet, View } from 'react-native';
export class MySlider extends React.Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY()
};
}
_panResponder = PanResponder.create({
// Ask to be the responder:
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
this.state.pan.setValue({x: 0, y: 0});
return true
},
onPanResponderMove: (evt, gestureState) => {
Animated.event([null, {dx: this.state.pan.x, dy: this.state.pan.y}])
return true
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
return true
},
onPanResponderTerminate: (evt, gestureState) => {
return true
},
onShouldBlockNativeResponder: (evt, gestureState) => {
return true;
},
});
render() {
let { pan } = this.state;
let [translateX, translateY] = [pan.x, pan.y];
const styles = StyleSheet.create({
mover: {
transform: [{translateX:translateX}, {translateY:5}],
height: 50,
width: 50,
borderRadius: 25,
backgroundColor: 'blue'
},
holder: {
height: 100,
width: Dimensions.get('window').width,
backgroundColor: 'yellow'
}
});
return (
<View style={styles.holder}>
<Animated.View style={styles.mover} {...this._panResponder.panHandlers}/>
</View>
)
}
}
最佳答案
我稍微改变了你的代码 所以试试这个
import React,{Component} from 'react'
import {
PanResponder,
View,
Animated,
StyleSheet,
Dimensions
} from 'react-native'
export default class MySlider extends React.Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY()
};
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder : () => true,
onPanResponderGrant: (e, gestureState) => {
this.setState({isAddNewSession:true})
},
onPanResponderMove : Animated.event([null,{ //Step 3
dx : this.state.pan.x,
dy : this.state.pan.y
}]),
onPanResponderRelease : (e, gesture) => { this.setState({isAddNewSessionModal:true},
)
Animated.spring(
this.state.pan,
{toValue:{x:0,y:0}} //To default position you can delete this animated.spring()
).start();
this.setState({isAddNewSession:false})
},
});
}
render() {
let { pan } = this.state;
let [translateX, translateY] = [pan.x, pan.y];
const styles = StyleSheet.create({
mover: {
transform: [{translateX:translateX}, {translateY:translateY}],
height: 50,
width: 50,
position:'absolute',
top:0,
borderRadius: 25,
zIndex:20,
backgroundColor: 'blue'
},
holder: {
height: 100,
width: Dimensions.get('window').width,
backgroundColor: 'yellow'
}
});
return (
<View style={styles.holder}>
<Animated.View style={styles.mover} {...this._panResponder.panHandlers}/>
</View>
)
}
}
让我知道它是否有效......
关于reactjs - React Native PanResponder,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51013791/