React Native realisiert den Auf- und Ab-Pull-Effekt der Überwachungsgeste

importiere {PanResponder} von ‚react-native‘;


var Dimensionen = erfordern('Dimensionen');
const deviceHeight = Dimensions.get("Fenster").height;
const Gerätebreite = Dimensions.get("Fenster").width;

Klasse TaskfinishedPage erweitert Komponente {
  Konstruktor(Requisiten) {
    super(Requisiten);
    Konsole.disableYellowBox = wahr;
    dieser.Zustand = {
      silderMargin: Gerätehöhe-230,
    };
      dies.letztesY1 = dieser.Zustand.silderMargin;
  }
 
  KomponenteWillMount() {

    this._panResponder = PanResponder.create({
      beimStartenSolltePanResponderEinstellen:(evt, gestureState) => {
          gibt true zurück;
      },
      beiBewegungSolltePanRespondereinstellen: (evt, Gestenstatus) => {
          gibt true zurück;
      },
      onPanResponderGrant: (evt, GesteState) => {
          dies._highlight();
      },
      beiPanResponderMove: (evt, Gestenstatus) => {
          console.log(`gestureState.dx : ${gestureState.dx} gestureState.dy : ${gestureState.dy}`);
          wenn (50 < this.lastY1 + gestureState.dy und this.lastY1 + gestureState.dy < Gerätehöhe - 230) {
             dies.setState({
              // marginLeft1: this.lastX1 + gestureState.dx,
              silderMargin: this.lastY1 + gestureState.dy,
          });
          }
         
      },
      beiPanResponderRelease: (evt, Gestenstatus) => {
          dies._unhighlight();
        
          dies.letztesY1 = dieser.Zustand.silderMargin;
      },
      onPanResponderTerminate: (evt, Gestenstatus) => {
      },
  });
  }


//Diese beiden Methoden werden ausgelöst, wenn die Hand den Punkt berührt und wieder verlässt.
  _unhighlight(){
    dies.setState({
        Schieberegler-Hintergrundfarbe: „transparent“,
    });
}

_hervorheben(){
    dies.setState({
        Schieberegler-Hintergrundfarbe: „transparent“,
    });
}


 rendern() {
    zurückkehren (
      <Container}>

        <Kopfzeile>
          <Links>
            <Schaltfläche transparent beim Drücken={() => {    
                NavigationUtil.resetGoBack(this.props.navigation);
            }}>
              <Symbolname = 'Pfeil zurück' Stil = {{Farbe: '#000'}}/>
            </Button>
          </Links>
          <Text>
          <Text style={{color:'#000'}}>Details zur abgeschlossenen Mission</Text>
          </Body>
          <Rechts />
        </Header>
        <Ansichtsstil={{ flex: 1 }}>
          <Ansichtsstil={
                [Stile.Panelansicht,
                {
                    Hintergrundfarbe: this.state.sliderBackgroundcolor,
                    marginTop: this.state.silderMargin,
                    zIndex:100
                
                }
                ]}
                  {...this._panResponder.panHandlers}
          >
       
            
          </Anzeigen>
          
 
          </Anzeigen>
      </Container>
    );
    }


const Stile = {
  Panelansicht: {
    Breite: Gerätebreite-20,
    Höhe: 410,
    Rand links: 10,
    Rand rechts: 10,
    Grenzradius: 6,  
 }
}

Standardmäßige TaskfinishedPage exportieren;