reactjs - 如何检测用户是否放大或缩小反应原生

Question

我正在开发一个反应本机应用程序，我想检测用户是放大还是缩小。

如果用户放大，我只想打印用户放大，如果用户缩小，我只想缩小

类似于下面的伪代码

   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>

请让我知道这样做的更好方法。

Answer 1

您应该使用 react-native-gesture-handler 并专门在您的视图/容器中使用捏合手势。

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");
           }
    }
  };