动画滚动顶部 0 反应本机

【问题标题】：Animation scroll top 0 react native动画滚动顶部 0 反应本机
【发布时间】：2023-01-26 04:51:19
【问题描述】：

我正在尝试将 scrollView 的值设置为 0，但它正在崩溃

下面是我的代码

 const scrollY = useRef(new Animated.Value(0)).current;
  return (
    <View style={{flex: 1}}>
      <Animated.ScrollView
        style={{flex: 1}}
        onScroll={Animated.event(
          [{nativeEvent: {contentOffset: {y: scrollY}}}],
          {useNativeDriver: true},
        )}
        scrollEventThrottle={16}>
        <Animated.View style={{top: scrollY}}>
          <ProductDetail route={route} navigation={navigation} />
        </Animated.View>
        <ProductDetailInfo route={route} />
        <Topping route={route} />
      </Animated.ScrollView>
      <ButtonProductDetail />
    </View>
  );
};

【问题讨论】：

标签： react-native animation

【解决方案1】：

如果你想滚动到列表的顶部，ScrollView 有一个方法，scrollTo()。以下是如何使用它的示例：

export default function ScrollToTopExample() {
  const listRef = useRef()

  const handleScrollToTop = () => {
    listRef.current.scrollTo({
      x: 0,
      y: 0,
      animated: true,
    })
  }

  const Button = () => (
    <TouchableOpacity onPress={handleScrollToTop} >
      <Text>Go to top</Text>
    </TouchableOpacity>
  )

  return (
    <View>
      <ScrollView ref={listRef} >
        // Some content here
      </ScrollView>
      <Button />
    </View>
  );
}

我创建了一个snack on Expo 供您在计算机上查看带有源代码的完整示例。但是滚动的动画只能在手机上使用。您可以使用Expo Go 应用程序从您的智能手机扫描二维码，以查看它的运行情况。

【讨论】：