React-Native组件scrollToTop监听失效 切换FlatList后滚动到顶部功能失效

问题原因 #

• 方法调用不匹配：ScrollView的滚动方法是scrollTo，但FlatList没有该方法，对应滚动到指定偏移量的API是scrollToOffset
• Ref赋值错误：通过useRef创建的引用对象，需要将组件实例挂载到它的.current属性上，你原代码的ref回调直接改写了scrollViewRef本身，会导致引用失效

修正后的代码 #

列表组件内FlatList部分 #

<FlatList
  ref={(ref) => (scrollViewRef.current = ref)}
  ...
/>

补充：ref绑定也可以直接简化为ref={scrollViewRef}，不需要写回调函数，React会自动把组件实例挂载到scrollViewRef.current上。

滚动事件监听部分 #

let scrollViewRef = useRef(null);
let scrollToTopListener = useRef(null);

useFocusEffect(
useCallback(() => {
  scrollToTopListener.current = EventRegister.addEventListener(
    'scrollToTop',
    () => {
      if (scrollViewRef.current) {
        // 替换为FlatList对应滚动方法
        scrollViewRef.current.scrollToOffset({offset: 0, animated: true});
      }
    },
  );

  return () => {
    EventRegister.removeEventListener(scrollToTopListener.current);
  };
}, []),

内容的提问来源于stack exchange，提问作者SDB_1998