Я хочу построить собственный собственный ответный механизм, движение которого начинается снизу и заканчивается в точке, где компонент полностью смонтирован как другой компонент,
Я пытался
{
import React, { Component } from 'react'
import { Text, View, StyleSheet, Animated, Image, PanResponder, ScrollView, Dimensions } from 'react-native'
import FontAwesomeIcon from '../components/FontAwesomeIcon';
import { FontAwesome } from '@expo/vector-icons';
const SCREEN_HEIGHT = Dimensions.get('window').height - 50
const MAIN_SCREEN_HEIGHT = Dimensions.get('window').height
const SCREEN_WIDTH = Dimensions.get('window').width
const PLAYER_MAX_HEIGHT = 70
export class MusicPlayer extends Component {
animation = new Animated.ValueXY({x:0, y: SCREEN_HEIGHT-PLAYER_MAX_HEIGHT})
panResponder = PanResponder.create({
onMoveShouldSetPanResponder: ()=>true,
onPanResponderGrant: (evt,gestureState)=>{
this.animation.extractOffset()
},
onPanResponderMove:(evt,gestureState)=>{
this.animation.setValue({x: 0, y: gestureState.dy})
console.log(gestureState)
},
onPanResponderRelease:(evt, gestureState)=>{
if(gestureState.dy <0){
Animated.spring(this.animation.y, {
toValue : -MAIN_SCREEN_HEIGHT + 120,
tension : 1,
}).start()
}
else if(gestureState.dy >0) {
Animated.spring(this.animation.y, {
toValue : MAIN_SCREEN_HEIGHT - 122,
tension :1
}).start()
}
}
})
constructor (props){
super(props)
}
render() {
const animatedHeight = {
transform : this.animation.getTranslateTransform()
}
return (
<>
<Animated.View
{...this.panResponder.panHandlers}
style={[animatedHeight, {...styles.PlayerContainer}]}>
</Animated.View>
</>
)
}
}
export default MusicPlayer
const styles = StyleSheet.create({
PlayerContainer : {
position : 'absolute',
left : 0,
right : 0,
zIndex : 10,
height : MAIN_SCREEN_HEIGHT,
backgroundColor : 'orange',
},
})
}
Так что panresponder движется и прячется также сверху и снизу,
, но я не хочу, чтобы ответчик реагировал, когда он достигает вершины, и не должен иметь возможность двигаться вниз ...
так вы можете мне помочь?