From c8054f17202e7ff33447cd70e83582f4914941ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=9D=B1=E6=BE=94?= <zhaodonghao586@outlook.com>
Date: Mon, 27 Dec 2021 22:18:07 +0800
Subject: [PATCH] fix: _

---
 example/src/stack/index.tsx |  6 ++---
 src/ScrollViewGesture.tsx   |  5 +----
 src/hooks/useOffsetX.ts     | 10 ++++-----
 src/layouts/StackLayout.tsx | 44 +++++++++++++++++++++++++------------
 4 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/example/src/stack/index.tsx b/example/src/stack/index.tsx
index 587f539d..698d1231 100644
--- a/example/src/stack/index.tsx
+++ b/example/src/stack/index.tsx
@@ -20,12 +20,10 @@ function Index() {
                     width: PAGE_WIDTH,
                     alignSelf: 'center',
                     justifyContent: 'center',
-                    borderWidth: 1,
-                    borderColor: 'red',
                 }}
                 mode="stack"
-                width={100}
-                height={100}
+                width={PAGE_WIDTH / 2}
+                height={PAGE_WIDTH / 2}
                 data={CAROUSEL_ITEMS}
                 renderItem={(backgroundColor) => (
                     <View
diff --git a/src/ScrollViewGesture.tsx b/src/ScrollViewGesture.tsx
index 0fdb9d97..f5e6f772 100644
--- a/src/ScrollViewGesture.tsx
+++ b/src/ScrollViewGesture.tsx
@@ -14,7 +14,6 @@ import Animated, {
     useSharedValue,
     withDecay,
     withSpring,
-    withTiming,
 } from 'react-native-reanimated';
 
 type GestureContext = {
@@ -184,9 +183,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                     panTranslation = panTranslation * 0.5;
                 }
 
-                translation.value = withTiming(ctx.panOffset + panTranslation, {
-                    duration: 0,
-                });
+                translation.value = ctx.panOffset + panTranslation;
             },
             onEnd: (e) => {
                 const { velocityX, velocityY, translationX, translationY } = e;
diff --git a/src/hooks/useOffsetX.ts b/src/hooks/useOffsetX.ts
index 907aef1b..333a5dcb 100644
--- a/src/hooks/useOffsetX.ts
+++ b/src/hooks/useOffsetX.ts
@@ -62,18 +62,18 @@ export const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {
 
             const outputRange = [
                 startPos,
-                MAX + HALF_WIDTH - 1,
+                MAX + HALF_WIDTH - Number.MIN_VALUE,
                 MIN - HALF_WIDTH,
                 startPos,
                 MAX + HALF_WIDTH,
-                MIN - HALF_WIDTH + 1,
+                MIN - HALF_WIDTH + Number.MIN_VALUE,
                 startPos,
             ];
 
             return interpolate(
-                Math.round(handlerOffsetX.value),
-                inputRange.map(Math.round),
-                outputRange.map(Math.round),
+                handlerOffsetX.value,
+                inputRange,
+                outputRange,
                 Extrapolate.CLAMP
             );
         }
diff --git a/src/layouts/StackLayout.tsx b/src/layouts/StackLayout.tsx
index 55a2c500..cdc6dfaa 100644
--- a/src/layouts/StackLayout.tsx
+++ b/src/layouts/StackLayout.tsx
@@ -1,16 +1,21 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
 import Animated, {
     interpolate,
     runOnJS,
     useAnimatedReaction,
     useAnimatedStyle,
+    useSharedValue,
+    withTiming,
 } from 'react-native-reanimated';
 import { log } from '../utils/log';
 import { useOffsetX } from '../hooks/useOffsetX';
 import type { IVisibleRanges } from '../hooks/useVisibleRanges';
 import { LazyView } from '../LazyView';
 
+const window = Dimensions.get('window');
+const PAGE_WIDTH = window.width;
+
 export const StackLayout: React.FC<{
     loop?: boolean;
     handlerOffsetX: Animated.SharedValue<number>;
@@ -22,7 +27,6 @@ export const StackLayout: React.FC<{
     vertical?: boolean;
 }> = (props) => {
     const {
-        handlerOffsetX,
         index,
         width,
         height,
@@ -33,13 +37,20 @@ export const StackLayout: React.FC<{
         vertical,
     } = props;
 
-    const [shouldUpdate, setShouldUpdate] = React.useState(false);
+    const handlerOffsetX = useSharedValue(0);
 
-    const size = React.useMemo(
-        () => (vertical ? height : width),
-        [vertical, width, height]
+    useAnimatedReaction(
+        () => props.handlerOffsetX.value,
+        (value) => {
+            handlerOffsetX.value = withTiming(value, { duration: 0 });
+        },
+        []
     );
 
+    const [shouldUpdate, setShouldUpdate] = React.useState(false);
+
+    const size = vertical ? height : width;
+
     const x = useOffsetX(
         {
             handlerOffsetX,
@@ -54,7 +65,7 @@ export const StackLayout: React.FC<{
     );
 
     const offsetXStyle = useAnimatedStyle(() => {
-        const startPosition = (x.value - index * width) / width;
+        const startPosition = (x.value - index * size) / size;
         runOnJS(log)(-x.value, ',', startPosition, `【${index}】`);
         return {
             transform: [
@@ -62,7 +73,7 @@ export const StackLayout: React.FC<{
                     translateX: interpolate(
                         startPosition,
                         [-(index + 1), -index, 0],
-                        [-width, 0, 0]
+                        [-(PAGE_WIDTH - size) * 2, 0, 0]
                     ),
                 },
                 {
@@ -70,10 +81,10 @@ export const StackLayout: React.FC<{
                         startPosition,
                         [-(index + 1), -index, 0, data.length - index],
                         [
-                            0.7,
-                            0.7,
-                            0.7 - index * 0.1,
-                            0.7 - (data.length - index) * 0.1,
+                            1,
+                            1,
+                            1 - index * 0.09,
+                            1 - (data.length - index) * 0.09,
                         ]
                     ),
                 },
@@ -81,14 +92,19 @@ export const StackLayout: React.FC<{
                     rotateZ: `${interpolate(
                         startPosition,
                         [-(index + 1), -index, 0],
-                        [-45, 0, 0]
+                        [-135, 0, 0]
                     )}deg`,
                 },
                 {
                     translateY: interpolate(
                         startPosition,
                         [-(index + 1), -index, 0, data.length - index],
-                        [0, 0, index * 40, (data.length - index) * 40]
+                        [
+                            0,
+                            0,
+                            index * size * 0.12,
+                            (data.length - index) * size * 0.12,
+                        ]
                     ),
                 },
             ],