scrollToLocation 始终滚动到反应本机中sectionList 的顶部

Question

我正在使用一个简单的函数滚动到本机反应部分列表中的索引；

let sectionIndex = route.params.index;

sectionListRef?.current?.scrollToLocation({
        sectionIndex,
        itemIndex: 0,
});

其中的sectionIndex来自路由参数。虽然我认为这可能会导致问题，但我创建了一个按钮来滚动到特定索引，甚至给出了一个数字作为索引，而不是使用来自路由参数的数字。但它不起作用，它只是忽略了sectionIndex并总是滚动到顶部（如果不是在顶部）。

没有更多相关代码，但无论如何，这是我的部分列表：

<SectionList
        ref={sectionListRef}
        refreshing={isFetching}
        onRefresh={refetch}
        sections={boards ?? []}
        renderItem={renderItem}
        ListEmptyComponent={
          !isFetching ? <NoBoards screenname="board" /> : null
        }
        ListFooterComponent={<VStack padding="5" />}
        renderSectionHeader={Sectionheader}
        stickySectionHeadersEnabled
      />

Answer 1

我用你的世博小吃重现了这个问题。我认为问题与主容器视图有关。最好在容器样式中提供

flex: 1

。

import { useRef } from 'react';
import { SectionList, View, Text, Button } from 'react-native';

const data = [
  { title: 'title 1', data: [1, 2, 3, 4] },
  { title: 'title 2', data: [1, 2, 3, 4] },
  { title: 'title 3', data: [1, 2, 3, 4] },
  { title: 'title 4', data: [1, 2, 3, 4] },
  { title: 'title 5', data: [1, 2, 3, 4] },
  { title: 'title 6', data: [1, 2, 3, 4] },
  { title: 'title 7', data: [1, 2, 3, 4] },
  { title: 'title 8', data: [1, 2, 3, 4] },
  { title: 'title 9', data: [1, 2, 3, 4] },
  { title: 'title 10', data: [1, 2, 3, 4] },
];

const App = () => {
  const sectionListRef = useRef(null);

  return (
    //Section List will always scroll to the top if this flex prop is removed
    <View style={{flex: 1}}>
      <View style={{flexDirection: 'row', marginTop: 50, justifyContent: 'space-around'}}>
        <Button 
          title={"Top"} 
          onPress={()=>{sectionListRef?.current?.scrollToLocation({sectionIndex: 0, itemIndex: 0})}}
        />
        <Button 
          title={"Bottom"} 
          onPress={()=>{sectionListRef?.current?.scrollToLocation({sectionIndex: 6, itemIndex: 0})}} 
        />
      </View>

      <SectionList
        ref={sectionListRef}
        renderSectionHeader={({section}) => <Text>{section.title}</Text>}
        stickySectionHeadersEnabled
        sections={data}
        renderItem={({ item }) => (
          <View style={{ padding: 20 }}>
            <Text>{item}</Text>
          </View>
        )}
      />
    </View>
  );
};

export default App;

Answer 2

不知道为什么，但 itemIndex: 1 已经使它工作了