React Native SVG捏合平移手势帧率骤降问题及优化咨询

我正尝试为包含50条及以上路径的SVG实现捏合缩放与平移手势，为保证SVG缩放不失真，需在捏合时直接缩放SVG本身，但这引发了性能问题与帧率骤降。当前使用reanimated 3.12.1版本，实现代码如下：

import {
    Dimensions,
    View,
  } from 'react-native';
  import React, {} from 'react';
  import Animated, {
    useAnimatedProps,
    useSharedValue,
  } from 'react-native-reanimated';
  import {
    Gesture,
    GestureDetector,
    GestureHandlerRootView,
  } from 'react-native-gesture-handler';
  import Svg, {Path, G} from 'react-native-svg';
  const AnimatedGroup = Animated.createAnimatedComponent(G);
  
  const {width, height} = Dimensions.get('screen');
  
const PinchPan = () => {

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

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

    const pan = Gesture.Pan()
        .minDistance(1)
        .onStart(() => {
        prevTranslationX.value = translationX.value;
        prevTranslationY.value = translationY.value;
        })
        .onUpdate(event => {
        const maxTranslateX = width / 2;
        const maxTranslateY = height / 2;

        translationX.value = clamp(
            prevTranslationX.value + event.translationX,
            -maxTranslateX,
            maxTranslateX,
        );
        translationY.value = clamp(
            prevTranslationY.value + event.translationY,
            -maxTranslateY,
            maxTranslateY,
        );
        })
        .runOnJS(true);
    // ============================================

    // ================== pinch ===================
    const scale = useSharedValue(1);
    const startScale = useSharedValue(0);

    const pinch = Gesture.Pinch()
        .onStart(() => {
        startScale.value = scale.value;
        })
        .onUpdate(event => {
        scale.value = clamp(startScale.value * event.scale, 1, 20);
        })
        .runOnJS(true);
    // ============================================

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

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

    return (
        <View style={styles.container}>
        <GestureHandlerRootView>
            <GestureDetector gesture={composed}>
            <View>
                <Svg
                width={width}
                height={height}
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width=".1"
                viewBox={`0 0 ${width} ${height}`}>
                {/* pinch */}
                <AnimatedGroup
                    animatedProps={animatedPropsPinch}
                    translateX={width / 2}
                    translateY={height / 2.7}>
                    {/* pan */}
                    <AnimatedGroup animatedProps={animatedPropsPan} scale={0.5}>
                    {svgPaths.map(path => (
                        <Path
                        key={Math.random()}
                        d={path.d}
                        translateX={-width / 2}
                        translateY={-height / 2}
                        fill={'grey'}
                        stroke={'black'}
                        onPress={() => 
                            console.log('path pressed')}
                        />
                    ))}
                    </AnimatedGroup>
                </AnimatedGroup>
                </Svg>
            </View>
            </GestureDetector>
        </GestureHandlerRootView>
        </View>
    );
};

• 将手势处理移至UI线程
  移除手势配置中的.runOnJS(true)，默认情况下Reanimated的手势回调会在UI线程执行，强制转到JS线程会增加跨线程通信开销，导致帧率下降。同时将clamp函数改为worklet，确保计算在UI线程完成：

  const clamp = (val: number, min: number, max: number) => {
    'worklet';
    return Math.min(Math.max(val, min), max);
  };
  
  // 移除pan和pinch中的.runOnJS(true)
  const pan = Gesture.Pan()
      .minDistance(1)
      .onStart(() => {
        'worklet';
        prevTranslationX.value = translationX.value;
        prevTranslationY.value = translationY.value;
      })
      .onUpdate(event => {
        'worklet';
        const maxTranslateX = width / 2;
        const maxTranslateY = height / 2;
  
        translationX.value = clamp(
            prevTranslationX.value + event.translationX,
            -maxTranslateX,
            maxTranslateX,
        );
        translationY.value = clamp(
            prevTranslationY.value + event.translationY,
            -maxTranslateY,
            maxTranslateY,
        );
      });
  
  const pinch = Gesture.Pinch()
      .onStart(() => {
        'worklet';
        startScale.value = scale.value;
      })
      .onUpdate(event => {
        'worklet';
        scale.value = clamp(startScale.value * event.scale, 1, 20);
      });
  

• 替换随机Key为稳定标识
  使用Math.random()作为Path的key会导致每次渲染都重新创建所有Path组件，极大消耗性能。改为使用路径的唯一属性（如path.id）或数组索引（路径顺序固定时）：

  {svgPaths.map((path, index) => (
      <Path
          key={path.id || index} // 用稳定的唯一标识
          d={path.d}
          translateX={-width / 2}
          translateY={-height / 2}
          fill={'grey'}
          stroke={'black'}
          onPress={() => console.log('path pressed')}
      />
  ))}
  

• 合并动画层级
  当前两层AnimatedGroup分别处理缩放和平移，可合并为一层，减少动画节点数量：

  const animatedProps = useAnimatedProps(() => ({
      transform: [
          {scale: scale.value},
          {translateX: translationX.value},
          {translateY: translationY.value},
      ],
  }));
  
  // 渲染时只保留一层AnimatedGroup
  <AnimatedGroup
      animatedProps={animatedProps}
      translateX={width / 2}
      translateY={height / 2.7}
      scale={0.5}>
      {svgPaths.map((path, index) => (
          <Path
              key={path.id || index}
              d={path.d}
              translateX={-width / 2}
              translateY={-height / 2}
              fill={'grey'}
              stroke={'black'}
              onPress={() => console.log('path pressed')}
          />
      ))}
  </AnimatedGroup>
  

• 优化SVG渲染参数

  • 增大stroke-width：当前0.1的线宽会触发大量抗锯齿计算，建议调整为0.5或更大，平衡性能与视觉效果。
  • 统一变换管理：移除AnimatedGroup上的translateX/translateY/scale props，全部通过animatedProps的transform数组控制，避免属性冲突和额外计算。

• 减少不必要的交互开销
  如果单个Path的onPress不是必需功能，建议移除；若需要点击交互，可改为在父容器上绑定点击事件，通过坐标判断点击的路径，减少50个Path的事件监听开销。

• 合并SVG路径
  将50条路径的d属性拼接成单个Path的d值，减少React组件数量，大幅提升渲染性能：

  const combinedPathD = svgPaths.map(path => path.d).join(' ');
  
  // 渲染单个Path替代循环
  <Path
      d={combinedPathD}
      translateX={-width / 2}
      translateY={-height / 2}
      fill={'grey'}
      stroke={'black'}
  />
  

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