scrollToLocation总是滚动到react native中sectionList的顶部

fivyi3re 于 2023-05-29 发布在 React

关注(0)|答案(1)|浏览(173)

我使用一个简单的函数滚动到react native中的节列表中的索引;

let sectionIndex = route.params.index;

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

其中sectionIndex来自路由参数。虽然我认为这可能是导致问题的原因，但我创建了一个按钮来滚动到一个特定的索引，甚至给出了一个数字作为索引，而不是使用来自路由参数的一个。但它不起作用，它只是忽略了sectionIndex，总是滚动到顶部（如果不是在顶部）。
没有更多相关代码，但无论如何，这是我的sectionList：

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

react-native

来源：https://stackoverflow.com/questions/76311750/scrolltolocation-always-scrolling-to-top-in-sectionlist-in-react-native

1条答案

按热度按时间

7nbnzgx91#

我使用您的expo snack重新创建了问题。我相信问题是关于主容器视图的。最好在容器样式中提供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;

赞(0）回复(0）举报 2023-05-29

我来回答

scrollToLocation总是滚动到react native中sectionList的顶部

1条答案

相关问题

热门标签

最新问答