Javascript 使用panresponder在按钮上单击刷卡
我正在尝试制作一个类似tinder的应用程序组件来刷卡,当我用手指刷卡时,它工作得很好,但是,我也想在点击按钮时实现同样的效果。到目前为止,我已经使用Panresponder创建了刷卡操作,下面是我的代码Javascript 使用panresponder在按钮上单击刷卡,javascript,ios,react-native,react-animated,panresponder,Javascript,Ios,React Native,React Animated,Panresponder,我正在尝试制作一个类似tinder的应用程序组件来刷卡,当我用手指刷卡时,它工作得很好,但是,我也想在点击按钮时实现同样的效果。到目前为止,我已经使用Panresponder创建了刷卡操作,下面是我的代码 render() { return ( <SafeAreaView style={{ flex: 1 }}> <View style={{ flex: 1, justifyContent: 'center', alignContent: 'center', ali
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1, justifyContent: 'center', alignContent: 'center', alignItems: 'center', backgroundColor: 'white' }}>
<View style={{
height: Dimensions.get('window').height * .75,
borderRadius: 5,
width: Dimensions.get('window').width * .75,
}}>
{
this.state.ARRAY.map((item, index) => {
this.position = new Animated.ValueXY()
this.rotate = this.position.x.interpolate({
inputRange: [-CONST_WIDTH / 2, 0, CONST_WIDTH / 2],
outputRange: ['-30deg', '0deg', '10deg'],
extrapolate: 'clamp'
})
this.rotateAndTranslate = {
transform: [{
rotate: this.rotate
},
...this.position.getTranslateTransform()
]
}
this.isPanDisabled = true
this.PanResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => this.isPanDisabled,
onPanResponderMove: (evt, gestureState) => {
this.position.setValue({ x: gestureState.dx, y: 0 })
},
onPanResponderRelease: (evt, gestureState) => {
if (gestureState.dx > 120) {
this.isPanDisabled = true
// console.log('dxgreaterThan120', gestureState.dx)
Animated.spring(this.position, {
toValue: { x: CONST_WIDTH + 100, y: 0 },
useNativeDriver: Platform.OS === 'android'
}).start(() => {
let modified = this.state.ARRAY.filter((x, ind) => { return ind != index })
console.log('modified', modified)
this.setState({ ARRAY: modified })
})
}
else if (gestureState.dx < -120) {
this.isPanDisabled = true
Animated.spring(this.position, {
toValue: { x: -CONST_WIDTH - 150, y: 0 },
useNativeDriver: Platform.OS === 'android'
}).start(() => {
let modified = this.state.ARRAY.filter((x, ind) => { return ind != index })
console.log('modified', modified)
this.setState({ ARRAY: modified })
})
}
else if (gestureState.dy < -120 || gestureState.dy > 120) {
this.isPanDisabled = false
}
else {
this.isPanDisabled = true
Animated.spring(this.position, {
toValue: { x: 0, y: 0 },
friction: 4,
useNativeDriver: Platform.OS === 'android'
}).start()
}
}
})
return (
<Animated.View
key={index}
{...this.PanResponder.panHandlers}
style={[this.rotateAndTranslate, {
borderRadius: 5,
backgroundColor: color[index],
position: 'absolute',
top: 0, bottom: 0,
left: 0, right: 0,
}]}>
<Animated.ScrollView
onScrollEndDrag={() => {
this.isPanDisabled = true
}}>
<View style={{ flex: 1, flexGrow: 1 }}>
{
ARRAY_SUUMB.map((item, index) => {
return (
<Text style={{
padding: 16,
color: 'white'
}}>
Swiper
</Text>
)
})
}
</View>
</Animated.ScrollView>
</Animated.View>
)
})
}
</View>
<View style={{ justifyContent: 'center', flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
onPress={() => this.swipeLeft()}
style={{
justifyContent: 'center',
height: 60,
width: 60,
borderRadius: 60 >> 1,
backgroundColor: 'gray',
alignContent: 'center',
alignItems: 'center'
}}>
<Text>Left</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.swipeRight()}
style={{
justifyContent: 'center',
height: 60, width: 60, borderRadius: 60 >> 1,
backgroundColor: 'gray',
alignContent: 'center', alignItems: 'center'
}}>
<Text>Right</Text>
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
)
}
任何帮助都将不胜感激,我有一个映射函数中的panresponder使用dataSnapshot.getChildren()@NikhilSharma您能不能更具体地回答这个问题并给出详细的答案谢谢(dataSnapshot child:dataSnapshot.getChildren()){if(child.getKey().equals(“yourkey”)){String childValue=child.getValue().toString());}将userId更改为JsonArray,然后检索该数组..并再次查询以查找具有mathed的用户uid@NikhilSharma谢谢你的回答,我试过了你的方法,谢谢你
swipeRight = () => {
this.position.setValue({ x: Dimensions.get('screen').width * 1.5, y: 0 }, () => {
this.isPanDisabled = true
Animated.spring(this.position, {
toValue: { x: CONST_WIDTH + 100, y: 0 },
useNativeDriver: Platform.OS === 'android'
}).start()
let modified = this.state.ARRAY.splice(0, -1)
console.log('modified', modified)
this.setState({ ARRAY: modified })
})