Блог

Я работаю над собственным приложением react и хочу определить, был ли пользователь увеличен или уменьшен.

Я просто хочу распечатать увеличенное изображение пользователя, если пользователь увеличен, и уменьшенное, если пользователь уменьшен

что-то вроде псевдокода ниже

    const detectZoom = (event)=>{

   if(event.gesture === "zoomed in"){
      console.log("Zoomed in");
   }
  
  if(event.gesture === "zoomed out"){
     console.log("Zoomed out");
  }
}


//This is how I want to call it
<TouchableHighlight onPress={this.detectZoom}>

</TouchableHighlight>
 

Пожалуйста, дайте мне знать, как лучше это сделать.

Вы должны использовать обработчик жестов react-native и, в частности, использовать жест Щепотки В своем представлении/контейнере.

 yarn add react-native-gesture-handler
 

https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/pinch-gh

 <PinchGestureHandler
        onGestureEvent={this._onPinchGestureEvent}
        onHandlerStateChange={this._onPinchHandlerStateChange}>
  <View style={styles.container} collapsable={false}>
  </View>
</PinchGestureHandler>
 

Ваш куратор:

  let previousScale = 1;
_onPinchHandlerStateChange = (event) => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      //Handle Zoom here based on the values..
          let newScale = previousScale * event.nativeEvent.scale;
           if(newScale > previousZoom){
            console.log("zoomed in");
           }else{
            console.log("zoomed out");
           }
    }
  };