我使用一个SectionList来呈现一个部分列表,下面是代码片段。我在Android上测试过,当部分更改时,列表会滚动回索引0,但在iOS上不会发生这种情况。
export const ListSymbol = ({
region = '',
currency = '',
rate = '',
channel = {},
sections = [],
loading = false,
fetchData=null,
renderItem: renderItemOptional = null,
renderSectionHeader: renderSectionHeaderOptional = null
}) => {
const [sectionsExpanded, setSectionsExpanded] = useState([])
const [itemsGraphShow, setItemsGraphShow] = useState([])
const sectionListRef = useRef()
useEffect(() => {
setSectionsExpanded([]);
setItemsGraphShow([]);
if (!isEmpty(sections)) {
scrollToSection();
}
}, [sections])
const keyExtractor = (item, index) => `list symbol - ${channel?.channelName} ${item?.symbol} ${item?.groupTitle} ${item?.unitCode} ${item?.unitName} ${index}`
const renderSectionHeader = () => null
const scrollToSection = () => {
console.log("@@@@ scrollToSection", sectionListRef);
sectionListRef.current?.scrollToLocation({
animated: true,
sectionIndex: 0,
itemIndex: 0,
// viewPosition: 0,
// viewOffset: 0
});
};
const scrollToIndexFailed = info => {
const wait = new Promise(resolve => setTimeout(resolve, 500));
wait.then(() => {
sectionListRef.current?.scrollToIndex({ index: info?.index, animated: true });
});
}
const renderItem = ({ item = {}, index = 0, section = [] }) => {
return (
<SymbolItem
{...{
region,
currency,
rate,
item,
index,
section,
sectionsExpanded,
setSectionsExpanded,
itemsGraphShow,
setItemsGraphShow
}}
/>
)
}
return (
<SectionList
ref={sectionListRef}
onScrollToIndexFailed={scrollToIndexFailed}
refreshing={loading}
onRefresh={fetchData}
nestedScrollEnabled
sections={sections}
keyExtractor={keyExtractor}
renderItem={renderItemOptional || renderItem}
renderSectionHeader={renderSectionHeaderOptional || renderSectionHeader}
showsVerticalScrollIndicator={false}
/>
)
}
字符串
我尝试了多种解决方案,比如使用initialNumToRender,其中包含初始位置和getItemLayout,但没有帮助。
2条答案
按热度按时间91zkwejq1#
找到了解决这个问题的办法。必须在调用scrollToLocation之前添加延迟。
字符串
ndh0cuux2#
如果不使用scrollToLocation,而是使用scrollTo
例如:
字符串
返回到0,0位置。