I've been looking into PanResponder. My current working hypothesis is that I would detect if there are two touches that are moving outwards and if so, increase the element size in the onPanResponderMove function.
This seems like a messy way to do it. Is there a smoother way?
If you need only simple pinch zoom functionality just use ScrollView (doc here)
Just give maximumZoomScale (greater than one) and minimumZoomScale as you wish.
Apart from looking at the Pan Responder, you'll need to take a look at the Gesture Responder System as well.
Particularly the evt that is returned by the responders.
Here's that the React-Native docs say.
evt is a synthetic touch event with the following form:
nativeEvent
changedTouches - Array of all touch events that have changed since the last event
identifier - The ID of the touch
locationX - The X position of the touch, relative to the element
locationY - The Y position of the touch, relative to the element
pageX - The X position of the touch, relative to the root element
pageY - The Y position of the touch, relative to the root element
target - The node id of the element receiving the touch event
timestamp - A time identifier for the touch, useful for velocity calculation
touches - Array of all current touches on the screen
Now that you have the touches you can work out which areas/objects are being touched and adjust the item accordingly.
You'll need to use the Gesture Responder System.
Simple pinch and zoom gestures require translation and scaling.
To calculate the translation and scale factors you'll want to store the touch events and use the touch location deltas.
I've written an NPM module that does this.
I've made a pinch to pan and zoom component for react-native-svg: https://snack.expo.io/@msand/zoomablesvg-v2.0.2
https://github.com/msand/zoomable-svg/blob/master/index.js
With support for view-box transforms and press/panhandlers in the children.
来源：https://stackoverflow.com/questions/31628663/how-would-you-implement-pinch-zoom-in-react-native