Javascript 在本地导航屏幕之间切换时，PanGesture动画不起作用

在本教程之后，我使用react本机导航创建了一个自定义选项卡栏组件：。然后，我在导航的顶部放置了一个自定义组件来模拟spotify minimized player，这样当我可以执行从minimized到全尺寸播放器的拖动动作时。然而，当我运行应用程序时，手势在第一个屏幕上工作正常，但当我切换屏幕时，手势不起作用

import React，{Fragment，useState}来自'React'；
从“react native”导入{文本、视图、TouchableOpacity、维度、样式表}
从“反应本机手势处理程序”导入{PanGestureHandler，State}
从“react native redash”导入{clamp，OnGetureEvent，timing，withSpring}
从“react native reanimated”导入动画
从“react-native-iphone-x-helper”导入{getBottomSpace}
从“./Player/Player”导入播放器
从“./player/MiniPlayer”导入MiniPlayer
const{height}=Dimensions.get（'window'）
const TABBAR_HEIGHT=getBottomSpace（）+50
常数最小化玩家高度=52
const SNAP_TOP=0
常量捕捉底部=高度-选项卡高度-最小化玩家高度
常量配置={
阻尼：30，
质量:1,，
刚度：150，
超调幅度：错误，
restSpeedThreshold:0.1，
restDisplacementThreshold:0.1
}
常数{
时钟，
价值
康德，
使用代码，
设置
块
不
时钟运行，
插入，
diffClamp，
推断
}=动画
const styles=StyleSheet.create({
容器：{
弹性：1，
},
观众席：{
…StyleSheet.absoluteFillObject，
背景颜色：“白色”
}
})
导出默认值（{statee，描述符，导航}）=>{
const translationY=新值（0）
const velocityY=新值（0）
常量状态=新值（状态未确定）
常量偏移=新值（捕捉底部）
常量goUp:已设置动画。值=新值（0）
恒货仓：已设置动画。值=新值（0）
const gestureHandler=onGestureEvent({
国家,，
翻译，
速度
})
常数translateY=钳位(
带弹簧({
国家,，
抵消，
值：translationY，
速度：velocityY，
捕捉点：[捕捉顶部，捕捉底部]，
配置
}),
上扣，
弹底
)
常量translateBottomTab=插值（translateY{
输入范围：[捕捉顶部，捕捉底部]，
outputRange:[选项卡高度，0]，
外推：外推
})
常量不透明度=插值（translateY{
输入范围：[捕捉底部-最小化玩家高度，捕捉底部]，
outputRange:[0，1]，
外推：外推
})
常数opacity2=插值（translateY{
输入范围：[
捕捉底部-最小化玩家高度*2，
捕捉底部-最小化玩家高度
],
outputRange:[0，1]，
外推：外推
})
常数时钟=新时钟（）
使用代码(
挡块([
cond（goUp[
设置(
抵消，
时机({
时钟，
from:offset，
收件人：SNAP_TOP
})
),
条件（非（时钟运行（时钟）），[设置（goUp，0）]）
]),
康德（货仓）[
设置(
抵消，
时机({
时钟，
from:offset，
到：捕捉底部
})
),
条件（非（时钟运行（时钟）），[设置（仓库，0）]）
])
]),
[]
)
古芬德勒=（）=>{
控制台日志（'TAPPERD UP'）；
设定值（1）
}
goDownHandler=（）=>{
控制台日志（'TAPPERD DOWN'）；
货仓设定值（1）
}
返回(
{statee.routes.map（（路由，索引）=>{
const{options}=描述符[route.key]；
常数标签=
options.tabBarLabel！==未定义
？options.tabBarLabel
：options.title！==未定义
？选项。标题
：route.name；
const Icon=options.tabBarIcon
const isFocused=statee.index==index；
const onPress=（）=>{
const event=navigation.emit({
键入：“tabPress”，
目标：route.key，
默认值：true，
});
如果（！isFocused&！event.defaultPrevented）{
导航.导航（路线.名称）；
}
};
const onLongPress=（）=>{
导航.emit({
键入：“tabLongPress”，
目标：route.key，
});
};
返回(
);
})}
);
}

我有确切的问题。这是因为重新渲染时，

重新激活的

会出错

我通过将下面的代码移出functional/class组件以使其全局化，修复了这个问题

const translationY = new Value(0)
  const velocityY = new Value(0)
  const state = new Value(State.UNDETERMINED)
  const offset = new Value(SNAP_BOTTOM)
  const goUp: Animated.Value<0 | 1> = new Value(0)
  const goDown: Animated.Value<0 | 1> = new Value(0)

  const gestureHandler = onGestureEvent({
    state,
    translationY,
    velocityY
  })

  const translateY = clamp(
    withSpring({
      state,
      offset,
      value: translationY,
      velocity: velocityY,
      snapPoints: [SNAP_TOP, SNAP_BOTTOM],
      config
    }),
    SNAP_TOP,
    SNAP_BOTTOM
  )

  const translateBottomTab = interpolate(translateY, {
    inputRange: [SNAP_TOP, SNAP_BOTTOM],
    outputRange: [TABBAR_HEIGHT, 0],
    extrapolate: Extrapolate.CLAMP
  })

  const opacity = interpolate(translateY, {
    inputRange: [SNAP_BOTTOM - MINIMIZED_PLAYER_HEIGHT, SNAP_BOTTOM],
    outputRange: [0, 1],
    extrapolate: Extrapolate.CLAMP
  })

  const opacity2 = interpolate(translateY, {
    inputRange: [
      SNAP_BOTTOM - MINIMIZED_PLAYER_HEIGHT * 2,
      SNAP_BOTTOM - MINIMIZED_PLAYER_HEIGHT
    ],
    outputRange: [0, 1],
    extrapolate: Extrapolate.CLAMP
  })

  const clock = new Clock()

  useCode(
    block([
      cond(goUp, [
        set(
          offset,
          timing({
            clock,
            from: offset,
            to: SNAP_TOP
          })
        ),
        cond(not(clockRunning(clock)), [set(goUp, 0)])
      ]),
      cond(goDown, [
        set(
          offset,
          timing({
            clock,
            from: offset,
            to: SNAP_BOTTOM
          })
        ),
        cond(not(clockRunning(clock)), [set(goDown, 0)])
      ])
    ]),
    []
  )

const translationY=新值（0）
const velocityY=新值（0）
常量状态=新值（状态未确定）
常量偏移=新值（捕捉底部）
常量goUp:已设置动画。值=新值（0）
恒货仓：已设置动画。值=新值（0）
const gestureHandler=onGestureEvent({
国家,，
翻译，
速度
})
常数translateY=钳位(
带弹簧({
国家,，
抵消，
值：translationY，
速度：velocityY，
捕捉点：[捕捉顶部，捕捉底部]，
配置
}),
上扣，
弹底
)
常量translateBottomTab=插值（translateY{
输入范围：[捕捉顶部，捕捉底部]，
outputRange:[选项卡高度，0]，
外推：外推
})
常量不透明度=插值（translateY{
输入范围：[捕捉底部-最小化玩家高度，捕捉底部]，
outputRange:[0，1]，
外推：外推
})
常数opacity2=插值（translateY{
输入范围：[
捕捉底部-最小化玩家高度*2，
SNAP_-BOTTOM-MI
const translationY = new Value(0)
  const velocityY = new Value(0)
  const state = new Value(State.UNDETERMINED)
  const offset = new Value(SNAP_BOTTOM)
  const goUp: Animated.Value<0 | 1> = new Value(0)
  const goDown: Animated.Value<0 | 1> = new Value(0)

  const gestureHandler = onGestureEvent({
    state,
    translationY,
    velocityY
  })

  const translateY = clamp(
    withSpring({
      state,
      offset,
      value: translationY,
      velocity: velocityY,
      snapPoints: [SNAP_TOP, SNAP_BOTTOM],
      config
    }),
    SNAP_TOP,
    SNAP_BOTTOM
  )

  const translateBottomTab = interpolate(translateY, {
    inputRange: [SNAP_TOP, SNAP_BOTTOM],
    outputRange: [TABBAR_HEIGHT, 0],
    extrapolate: Extrapolate.CLAMP
  })

  const opacity = interpolate(translateY, {
    inputRange: [SNAP_BOTTOM - MINIMIZED_PLAYER_HEIGHT, SNAP_BOTTOM],
    outputRange: [0, 1],
    extrapolate: Extrapolate.CLAMP
  })

  const opacity2 = interpolate(translateY, {
    inputRange: [
      SNAP_BOTTOM - MINIMIZED_PLAYER_HEIGHT * 2,
      SNAP_BOTTOM - MINIMIZED_PLAYER_HEIGHT
    ],
    outputRange: [0, 1],
    extrapolate: Extrapolate.CLAMP
  })

  const clock = new Clock()

  useCode(
    block([
      cond(goUp, [
        set(
          offset,
          timing({
            clock,
            from: offset,
            to: SNAP_TOP
          })
        ),
        cond(not(clockRunning(clock)), [set(goUp, 0)])
      ]),
      cond(goDown, [
        set(
          offset,
          timing({
            clock,
            from: offset,
            to: SNAP_BOTTOM
          })
        ),
        cond(not(clockRunning(clock)), [set(goDown, 0)])
      ])
    ]),
    []
  )