React Native Gesture Handler捏合手势触发应用闪退求助

问题根源 #

你遇到的无报错崩溃大概率是因为未配置react-native-reanimated的Babel插件，这是使用Reanimated动画库的必要步骤，缺失会导致手势或动画触发时App异常退出。此外，Gesture.Race的使用方式也不符合捏合+拖动的交互需求。

解决方案步骤 #

1. 添加Reanimated Babel插件

修改项目根目录下的babel.config.js，添加react-native-reanimated/plugin插件：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

修改后必须重启Metro服务，否则配置不生效。

2. 修正手势组合逻辑

Gesture.Race会让多个手势竞争，先触发的手势会终止其他手势，这不符合捏合时同时支持拖动的交互预期。改用Gesture.Simultaneous允许两个手势同时触发：

const composed = Gesture.Simultaneous(pinch, pan);

3. 优化捏合与拖动的交互逻辑（可选）

当前的平移逻辑未考虑缩放后的坐标偏移，可能导致拖动位置不符合预期。优化后的完整代码如下：

import React from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
} from 'react-native-reanimated';

const { width, height } = Dimensions.get('screen');

function clamp(val: number, min: number, max: number) {
  return Math.min(Math.max(val, min), max);
}

export default function TabTwoScreen() {
  const scale = useSharedValue(1);
  const startScale = useSharedValue(1);

  const translationX = useSharedValue(0);
  const translationY = useSharedValue(0);
  const prevTranslationX = useSharedValue(0);
  const prevTranslationY = useSharedValue(0);

  const pinch = Gesture.Pinch()
    .onStart(() => {
      startScale.value = scale.value;
    })
    .onUpdate((event) => {
      scale.value = clamp(
        startScale.value * event.scale,
        0.5,
        Math.min(width / 100, height / 100)
      );
    });

  const pan = Gesture.Pan()
    .onStart(() => {
      prevTranslationX.value = translationX.value;
      prevTranslationY.value = translationY.value;
    })
    .onUpdate((event) => {
      translationX.value = prevTranslationX.value + event.translationX;
      translationY.value = prevTranslationY.value + event.translationY;
    });

  const boxAnimatedStyles = useAnimatedStyle(() => ({
    transform: [
      { scale: scale.value },
      { translateX: translationX.value },
      { translateY: translationY.value },
    ],
  }));

  // 使用Simultaneous允许捏合与拖动同时触发
  const composed = Gesture.Simultaneous(pinch, pan);

  return (
    <GestureHandlerRootView style={styles.container}>
      <GestureDetector gesture={composed}>
        <Animated.View style={[styles.box, boxAnimatedStyles]} />
      </GestureDetector>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 100,
    borderRadius: 20,
    backgroundColor: '#b58df1',
  },
});

4. 验证依赖版本

确保所有依赖都是Expo兼容的最新版本，执行以下命令重新安装：

npx expo install react-native-gesture-handler react-native-reanimated
yarn install

验证步骤 #

1. 重启Metro服务（关闭后重新执行npx expo start）
2. 重新运行App
3. 使用双指捏合测试缩放功能，单指测试拖动功能

内容的提问来源于stack exchange，提问作者Lin Jay