React Native: Constraining Animated.Value

Ich mache eine React-Native App und das Szenario ist dies: Ich möchte der Benutzer in der Lage sein, eine Ansicht zu schwenken, aber nicht ganz so, wie er will. Ich möchte constraint wie viel die Ansicht verschieben kann, wenn vom Benutzer gezogen wird.React Native: Constraining Animated.Value

Ich habe die Dokumentation sowohl der PanResponder und Animated API (mehrere Male) gelesen, kann aber nichts finden, was dies tut, noch kann ich jemanden finden, der etwas Ähnliches implementiert.

Einschränkung im Ereignis des panresponders?

Einschränkung beim Anwenden der Transformationen?

style = { 
    transform: { 
     transformX: ...,//Use interpolate to constrain the values somehow? 
     transformY: ... 
    } 
}

Quelle

2016-04-20 stinodes

Überprüfen Sie die [Animated.Value] (https://facebook.github.io/react-native/docs/animated.html), es können Sie jede steuern "Animate", nimmt 0 - 1 Werte, aber Sie könnten es verwenden, um bestimmte 'MAX' und' MIN' Werte für Ihre Ansicht zu überprüfen. –

Es gibt interpolieren, aber ich glaube nicht, dass die Werte tatsächlich eingeschränkt werden, oder? Soweit ich das beurteilen kann, werden sie nur neu zugeordnet. – stinodes

interpolieren unterstützt Constrain mithilfe von Extrapolation. Aus der Dokumentation: Sie können die Extrapolation festlegen, indem Sie die Optionen extrapolieren, extrapolierenLeft oder extrapolierenRechten festlegen. Der Standardwert ist extend, aber Sie können clamp verwenden, um zu verhindern, dass der Ausgabewert outputRange überschreitet. – David

Die von @stinodes bereitgestellte Lösung verschlechtert die Leistung. Warum nicht mit interpolate auf folgende Weise:

const maxX = 200; 
const constrainedX = this.state.pan.x.interpolate({ 
    inputRange: [0, maxX, Infinity], 
    outputRange: [0, maxX, maxX] 
})

Quelle

2017-08-11 09:42:50 mieszko4

Sie haben Recht! Es ist lange her, seit ich die Frage gestellt und meine eigene Antwort gegeben habe. – stinodes

Ich würde Ihre Antwort als die akzeptierte festlegen, aber das scheint nicht einfach zu sein mit mobilen. – stinodes

Danke @stinodes :) – mieszko4

Die Lösung kam ich mit: Seit Animated.event() kehrt eine Funktion, können Sie einfach Ihre verarbeiteten gestureState, mit erzwungener Werte, in diese Funktion übergeben.
Es würde wie folgt aussehen:

onPanResponderMove: (evt, gestureState) => { 
    let newdx = gestureState.dx, //DO SOMETHING WITH YOUR VALUES 
     newdy = gestureState.dy; 
    Animated.event([null,{ 
     dx: this.state.pan.x, 
     dy: this.state.pan.y 
    }])(evt, {dx: newdx, dy: newdy}); 
},

Ob es es getan werden sollte, obwohl fraglich ist.

Quelle

2016-04-20 14:49:05 stinodes

React Native: Constraining Animated.Value

Antwort

Verwandte Themen