Проблема, с которой я сталкиваюсь, заключается в том, что если я пытаюсь прокрутить элемент с itemIndex, равным 0, список секций всегда прокручивается. к первому элементу первого раздела, независимо от предоставленного мной разделаIndex. Если itemIndex больше 0, прокрутка работает должным образом и переходит к правильному разделу и элементу. Проблема возникает в iOS. Вот упрощенный код для воспроизведения проблемы:
Код: Выделить всё
import React, { useRef } from 'react';
import {
SectionList,
View,
Text,
Button,
StyleSheet,
StatusBar,
} from 'react-native';
const App = () => {
const sectionListRef = useRef(null);
const sections = Array.from({ length: 10 }, (_, sectionIndex) => ({
title: `Section ${sectionIndex + 1}`,
data: Array.from(
{ length: 30 },
(_, itemIndex) => `Item ${sectionIndex + 1}.${itemIndex + 1}`
),
}));
const scrollToLocation = ({
sectionIndex,
itemIndex,
}: {
sectionIndex: number;
itemIndex: number;
}) => {
{
sectionListRef.current?.scrollToLocation({
sectionIndex,
itemIndex,
viewPosition: 0.5, // Center the item in the view
});
}
};
const onScrollFail = (info: any) => {
console.log('Failed to scroll, retrying', info);
setTimeout(() => {
scrollToLocation({ sectionIndex: 0, itemIndex: info.index });
}, 500);
};
return (
scrollToLocation({ sectionIndex: 0, itemIndex: 0 })}
/>
scrollToLocation({ sectionIndex: 3, itemIndex: 0 })}
/>
item + index}
renderItem={({ item }) => (
{item}
)}
renderSectionHeader={({ section }) => (
{section.title}
)}
onScrollToIndexFailed={onScrollFail}
/>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
paddingTop: 50,
},
buttonsContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 10,
},
item: {
padding: 15,
backgroundColor: '#f9f9f9',
borderBottomWidth: 1,
borderBottomColor: '#ddd',
},
header: {
padding: 10,
backgroundColor: '#e0e0e0',
},
headerText: {
fontWeight: 'bold',
},
});
export default App;
Подробнее здесь: https://stackoverflow.com/questions/792 ... index-is-0