react-native-collapsible-tab-view更新FlatList数据时自动回顶问题

• 使用react-native-collapsible-tab-view组件开发时出现交互异常：滑动到FlatList最底部触发分页加载，接口返回数据通过setData更新列表数据源后，页面自动回弹到顶部
• 异常仅在第一个标签页（tab1）出现，其余标签页滚动、加载更多交互均正常
• 问题复现效果：
  

按优先级依次排查以下常见诱因，基本可以覆盖这类单tab加载后自动回顶的问题：

• 检查tab1下FlatList的属性透传逻辑
  该组件库要求内部列表必须透传useCollapsibleTabs钩子返回的滚动相关属性，禁止自定义覆盖onScroll、禁止给列表绑定自定义外层滚动ref，否则会导致组件内部的滚动位置记录失效，数据更新时位置重置。
  标准写法参考：

  import { useCollapsibleTabs } from 'react-native-collapsible-tab-view';
  
  const Tab1Content = () => {
    const [data, setData] = useState([]);
    const { scrollY, ...listProps } = useCollapsibleTabs();
  
    const loadMore = async () => {
      const res = await fetchApi();
      setData(prev => [...prev, ...res.list]);
    };
  
    return (
      <FlatList
        {...listProps}
        data={data}
        keyExtractor={item => item.id}
        renderItem={({item}) => <ListItem item={item} />}
        onEndReachedThreshold={0.2}
        onEndReached={loadMore}
      />
    )
  }
  

• 检查tab1的FlatList是否被意外重挂载
  排查是否给FlatList或者它的外层父容器加了随加载状态、数据长度变化的key属性，比如key={data.length}、key={loading}这类写法，一旦key值变化React会直接销毁重建整个列表组件，自然会回到顶部位置。
• 校验tab路由配置
  检查tabs配置里第一个tab的标识值，不要用空字符串、数字作为name字段，统一用固定字符串作为路由名，避免组件内部的滚动位置映射表索引匹配错误，导致更新数据时读错位置。
• 兜底兼容配置
  如果以上逻辑都确认没问题，可以给FlatList加上maintainVisibleContentPosition属性，数据更新时会主动保持当前可见内容的位置，不会自动跳回顶部：

  <FlatList
    // 其余属性不变
    maintainVisibleContentPosition={{
      minIndexForVisible: 0,
      autoscrollToTopThreshold: 10,
    }}
  />
  

注：其余标签页表现正常即可排除组件库全局配置问题，不需要改动全局组件参数，只需要单独排查tab1的列表渲染逻辑即可。

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