探秘React Native源码：一个实战Demo带来的启示

由于原代码已经是一个完整的React Native应用，下面我们提取其中的核心函数，展示如何使用react-native-gesture-handler来处理手势：

import React, { useRef, useEffect } from 'react';
import { Animated, Text, View } from 'react-native';
import { PanGestureHandler, State } from 'react-native-gesture-handler';
 
const Card = ({ children, panGestureRef, scale }) => {
  const translateY = panGestureRef.current.translationY;
  const rotate = translateY.interpolate({
    inputRange: [-150, 0, 150],
    outputRange: ["-30deg", "0deg", "30deg"],
  });
 
  return (
    <PanGestureHandler
      onGestureEvent={panGestureRef.current}
      minDist={10}
    >
      <Animated.View
        style={{
          transform: [{ rotate }, { scale }],
        }}
      >
        {children}
      </Animated.View>
    </PanGestureHandler>
  );
};
 
const App = () => {
  const panGestureRef = useRef(new Animated.ValueXY());
 
  useEffect(() => {
    Animated.spring(panGestureRef.current, {
      toValue: { x: 0, y: 0 },
      useNativeDriver: true,
    }).start();
  }, [panGestureRef]);
 
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Card scale={1} panGestureRef={panGestureRef}>
        <Text>Hello, World!</Text>
      </Card>
    </View>
  );
};
 
export default App;

这段代码定义了一个Card组件，它接受children作为其子元素，并使用PanGestureHandler来处理拖动手势。panGestureRef是一个Animated.ValueXY的引用，用于跟踪触摸移动。通过panGestureRef.current.translationY计算Y方向的移动距离，并使用Animated.interpolate来将这个距离映射到旋转的角度。这个例子展示了如何将手势处理与动画结合使用，是学习React Native手势处理和动画的一个很好的起点。