我只是想通过使用 reanimated 和 redash 来缩放图像。
但是我抓取的组件位于前一个组件之上，但位于下一个组件之下。我知道这有点复杂的解释。为此，我试图绘制一个模式来更好地解释你。
因此，在上面的图像中，1,2 和 3 是我保存图像的卡片。我捏缩放到第二张图像，但它保持在第一个图像之上（这是我想要的），但在这种情况下，它也保持在下一张第三张卡片的下方。
我怎样才能防止这种情况？
const SIZE = shared === true ? width - 20 : width;
const styles = StyleSheet.create({
image: {
...StyleSheet.absoluteFill,
width: undefined,
height: undefined,
resizeMode: "contain",
},
});
const state = new Value(State.UNDETERMINED);
const pinchRef = useRef(PinchGestureHandler);
const origin = vec.createValue(0, 0);
const pinch = vec.createValue(0, 0);
const focal = vec.createValue(0, 0);
const scale = new Value(1);
const numberOfPointers = new Value(0);
const pinchGestureHandler = onGestureEvent({
numberOfPointers,
scale,
state,
focalX: focal.x,
focalY: focal.y,
});
const zIndex = cond(eq(state, State.ACTIVE), 3, 0);
const adjustedFocal = vec.add(
{
x: -SIZE / 2,
y: -SIZE / 2,
},
focal
);
useCode(
() =>
block([
cond(pinchBegan(state), vec.set(origin, adjustedFocal)),
cond(
pinchActive(state, numberOfPointers),
vec.set(pinch, vec.minus(vec.sub(origin, adjustedFocal)))
),
cond(eq(state, State.END), [
set(pinch.x, timing({ from: pinch.x, to: 0 })),
set(pinch.y, timing({ from: pinch.y, to: 0 })),
set(scale, timing({ from: scale, to: 1 })),
]),
]),
[adjustedFocal, numberOfPointers, origin, pinch, scale, state]
);
return (
<>
<Animated.View style={{ width: SIZE, height: SIZE, zIndex }}>
<PinchGestureHandler ref={pinchRef} {...pinchGestureHandler}>
<Animated.View style={StyleSheet.absoluteFill}>
<Animated.Image
style={[
styles.image,
{
transform: [
...translate(pinch),
...transformOrigin(origin, { scale }),
],
},
]}
source={{ uri: app.HOST + photo }}
/>
</Animated.View>
</PinchGestureHandler>
</Animated.View>
</>
);
这是组件