Question

每次使用 useScrollToTop 函数触发 useEffect 时，我都试图滚动到屏幕顶部。但是当我尝试在 useEffect 中使用该函数时出现此错误：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

这是我的代码：

import { useScrollToTop } from '@react-navigation/native';

export default function Home(...) {
  const ref = useRef(null);

  useEffect(() => {
    useScrollToTop(ref);
  }, [category])

  return (
    <FlatList 
       ref={ref}
       data={DATA}
       renderItem={renderItem}
       keyExtractor={item => item.approved_site_id}
       numColumns={3} />
  )
}

我该如何解决这个问题？我想要做的就是在每次触发 useEffect 时在 React Native Expo 中滚动到屏幕顶部。

Answer 1

您不能在另一个钩子中使用钩子。 useScrollToTop 专门设计用于在导航期间滚动到顶部。

我猜您尝试做的是在类别更改时滚动到顶部，您可以尝试以下操作

import { useScrollToTop } from '@react-navigation/native';

export default function Home(...) {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      ref.current.scrollToOffset({ offset: 0 })
    }
  }, [category])

  return (
    <FlatList 
       ref={ref}
       data={DATA}
       renderItem={renderItem}
       keyExtractor={item => item.approved_site_id}
       numColumns={3} />
  )
}

Answer 2

人们在寻找为什么 useScrollTop 不起作用，OP 要求与 FlatList 一起使用，如果您使用的是 ScrollView，请使用 scrollTo

const scrollViewRef = useRef(null)

const scrollTop = () => {
  if (scrollViewRef.current) {
    scrollViewRef.current.scrollTo({ y: 0, animated: true })
  }
}

<ScrollView ref={scrollViewRef}>

...

<Button onPress={scrollTop} />

useScrollToTop 在 useEffect 中不起作用？ (React Native Expo)

2 个答案: