React Native Redash库使用求助：无法实现Instagram捏合缩放

你这明显是踩了版本兼容性的坑——React Native动画生态里，Reanimated v1和v2的API差异极大，而Redash的版本是和Reanimated严格绑定的：你当前用的react-native-redash@15.6.0是专门为Reanimated v2设计的，但你的项目依赖的是react-native-reanimated@1.7.0（v1版本），这直接导致你看到的API和参考视频里完全不一致！

下面是针对你的技术栈（Reanimated v1 + React Native 0.61.4 + TypeScript）的完整解决方案：

1. 先降级Redash到匹配Reanimated v1的版本 #

Redash v14.x系列是支持Reanimated v1的最后一个大版本，先执行降级：

# npm
npm install react-native-redash@^14.2.4 --save

# yarn
yarn add react-native-redash@^14.2.4

2. 适配Reanimated v1的捏合缩放实现逻辑 #

在Reanimated v1中，没有v2的SharedValue和Redash v15里的vec.set这类API，我们需要用单个的Animated.Value来管理缩放比例、平移坐标，配合PinchGestureHandler处理手势：

TypeScript示例代码 #

import React, { useRef } from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { PinchGestureHandler, State } from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';
import { interpolateClamp } from 'react-native-redash';

const { Value, event } = Animated;

const PinchZoomImage = () => {
  // 单独声明动画值：缩放比例、平移X/Y、手势状态
  const scale = useRef(new Value(1)).current;
  const translateX = useRef(new Value(0)).current;
  const translateY = useRef(new Value(0)).current;
  const gestureState = useRef(new Value(State.UNDETERMINED)).current;

  // 绑定捏合手势事件（Reanimated v1标准写法）
  const onPinchEvent = event(
    [
      {
        nativeEvent: {
          scale,
          translationX: translateX,
          translationY: translateY,
          state: gestureState,
        },
      },
    ],
    { useNativeDriver: true }
  );

  // 限制缩放范围（比如最小0.5倍，最大2倍）
  const clampedScale = interpolateClamp(scale, 0.5, 2);

  return (
    <PinchGestureHandler
      onGestureEvent={onPinchEvent}
      onHandlerStateChange={onPinchEvent}
    >
      <Animated.View style={styles.container}>
        <Animated.Image
          source={{ uri: 'https://example.com/your-image.jpg' }}
          style={[
            styles.image,
            {
              transform: [
                { scale: clampedScale },
                { translateX },
                { translateY },
              ],
            },
          ]}
          resizeMode="contain"
        />
      </Animated.View>
    </PinchGestureHandler>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: '100%',
    height: '100%',
  },
});

export default PinchZoomImage;

3. 关键API差异说明 #

• Vector/vec: Redash v14（适配Reanimated v1）里的vec确实只有create方法，但Reanimated v1的动画值是单个独立的Animated.Value，不需要用向量对象来批量管理，直接单独声明每个值即可。
• onGestureEvent: Redash v15里的onGestureEvent是针对Reanimated v2的新Gesture API设计的，而Reanimated v1需要搭配react-native-gesture-handler的手势组件，用Animated.event来绑定原生事件。

4. 关于Redash v1文档的适用场景 #

Redash的v1文档正好对应Reanimated v1的版本，降级后你再看v1文档的API就完全匹配了——比如interpolateClamp、multiply这些工具函数，都是你现在可以直接用的。如果之后打算升级到Reanimated v2，再把Redash升到v15+，那时就能用vec.set和v2的手势API了。

内容的提问来源于stack exchange，提问作者Quang Khải Đàm