Javascript 当我到达数组的第一个元素时，如何让不透明度停止工作？

所以，我试着做一个计时器，当你可以用刷卡来选择时间的时候。我创建了滑动和动画，所以当我滑动中间元素上方和下方的元素时，会消失。这是我的密码：

const { width, height } = Dimensions.get("window");

const styles = StyleSheet.create({
  display: {
    flexDirection: 'row',
  },

  timeContainer: {
    marginTop: height / 2,
    width: width,
    alignItems: 'center',
  },

  text: {
    fontSize: 25,
  }
})

const SampleFunction = (item) => {
  Alert.alert(item);
}

const App = () => {
  const [containerHeight, setContainerHeight] = useState(height);

  let numbers = new Array(40);

  for (i = 0, num = 5; i < numbers.length; i++, num += 5) {
    numbers[i] = num;
  }

  const TIME_HEIGHT = styles.text.fontSize  * 1.34;

  const clock = useClock();
  const index = useValue(0);
  const snapPoints = numbers.map((_, i) => i * -TIME_HEIGHT)

  const offsetY = useValue(0);
  const y = useValue(0);

  const {
    gestureHandler,
    state, 
    velocity,
    translation
  } = usePanGestureHandler();

  const to = snapPoint(y, velocity.y, snapPoints);

  useCode(
    () => [
      cond(eq(state, State.ACTIVE), [
        set(y, add(offsetY, translation.y))
      ]),
      cond(eq(state, State.END), [
        set(y, timing({ clock, from: y, to })),
        set(offsetY, y),
        cond(not(clockRunning(clock)), [
          set(index, floor(divide(y, -TIME_HEIGHT))),
          debug("index", index)
        ]),
      ]),
    ], 
    []
  );

  const visibleCards = Math.floor((containerHeight - (height / 2 - TIME_HEIGHT) - (height / 2)) / TIME_HEIGHT);

  return (
    <View>
      <Image 
        style={{
          width: width,
          height: height / 2 - TIME_HEIGHT,
          position: 'absolute',
          zIndex: 0
        }}
        source={require('./assets/TopImage.jpg')}
      />
      <Image 
        style={{
          width: width,
          height: height / 2,
          position: 'absolute',
          marginTop: height / 2 + TIME_HEIGHT * 2,
          zIndex: 0
        }}
        source={require('./assets/BotImage.jpg')}
      />

      <PanGestureHandler {...gestureHandler}>
        <Animated.View>
            <Animated.View style={styles.timeContainer}>
              {numbers.map((item, key) => {
                const positionY = add(y, key * TIME_HEIGHT);
                const isDisappearing = -TIME_HEIGHT;
                const isOnTop = 0;
                const isOnBottom = (visibleCards - 1) * TIME_HEIGHT;
                const isAppearing = visibleCards * TIME_HEIGHT;

                const extraTranslationY = interpolate(y, {
                  inputRange: [isOnBottom, isAppearing],
                  outputRange: [0, -TIME_HEIGHT / 4],
                  extrapolate: Extrapolate.CLAMP
                });

                const translateY = add(interpolate(y, {
                  inputRange: [-TIME_HEIGHT * key - height / 2, 0],
                  outputRange: [-TIME_HEIGHT * key - height / 2, 0],
                  extrapolate: Extrapolate.CLAMP
                }), extraTranslationY);
                
                const opacity = interpolate(positionY, {
                  inputRange: [isDisappearing, isOnTop, isOnBottom, isAppearing],
                  outputRange: [0.3, 1, 1, 0.3],
                });

                return (
                  <Animated.View
                    key={key} 
                    onPress={ SampleFunction.bind(item) }
                    style={[{ opacity, transform: [{ translateY }] }]}
                  >
                    <Text style={styles.text}> {item} </Text>
                  </Animated.View>
                )
              })}
            </Animated.View>
        </Animated.View>
      </PanGestureHandler>
    </View>
  )
}

export default App;

const{width，height}=Dimensions.get（“窗口”）；
const styles=StyleSheet.create({
显示：{
flexDirection:'行'，
},
时间容器：{
marginTop：高度/2，
宽度：宽度，
对齐项目：“居中”，
},
正文：{
尺寸：25，
}
})
const SampleFunction=（项）=>{
警报。警报（项目）；
}
常量应用=（）=>{
const[containerHeight，setContainerHeight]=使用状态（高度）；
让数字=新数组（40）；
对于（i=0，num=5；ii*-时间高度）
const offsetY=useValue（0）；
常数y=使用值（0）；
常数{
手势处理程序，
国家,，
速度
翻译
}=usePanGestureHandler（）；
常数to=捕捉点（y，速度.y，捕捉点）；
使用代码(
() => [
cond（等式（状态，激活状态）[
设置（y，添加（偏移，平移.y））
]),
条件（等式（状态，状态结束）[
设置（y，定时（{时钟，从：y到}），
设置（偏移，y），
条件（非（时钟运行（时钟））[
集合（索引，楼层（除以（y，-时间和高度）），
调试（“索引”，索引）
]),
]),
], 
[]
);
const visibleCards=数学楼层（（容器高度-（高度/2-时间高度）-（高度/2））/时间高度）；
返回(
{numbers.map（（项，键）=>{
常量位置y=添加（y，键*时间\高度）；
常量isDisappearing=-时间和高度；
常数isOnTop=0；
常数isOnBottom=（可视卡-1）*时间和高度；
const isAppearing=可视卡*时间和高度；
常量外平移y=内插（y{
输入范围：[isOnBottom，isAppearing]，
输出范围：[0，-时间/高度/4]，
外推：外推
});
常量translateY=添加（插值（y{
输入范围：[时间高度*键高度/2，0]，
outputRange:[-时间高度*键高度/2，0]，
外推：外推
})，翻译外）；
常数不透明度=插值（位置Y{
输入范围：[IsIsIsAppearing，isOnTop，isOnBottom，isAppearing]，
输出范围：[0.3,1,1,0.3]，
});
返回(
{item}
)
})}
)
}
导出默认应用程序；

但我有个问题。当我到达数组的开始或结束时，我仍然可以向下滑动，因此我的元素将由于不透明度而消失。它又回来了，但看起来不太好，所以我该如何修复它呢