React-nativesectionList всегда прокручивается до первого раздела, если индекс элемента 0, независимо от индекса раздела:Android

Форум для тех, кто программирует под Android
Ответить Пред. темаСлед. тема
Anonymous
 React-nativesectionList всегда прокручивается до первого раздела, если индекс элемента 0, независимо от индекса раздела:

Сообщение Anonymous »

Я использую РазделList в React Native для отображения нескольких разделов с несколькими элементами в каждом разделе. Я программно прокручиваю определенные разделы и элементы, используя метод прокруткиToLocation.
Проблема, с которой я сталкиваюсь, заключается в том, что если я пытаюсь прокрутить элемент с 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}`),
}));

// Scroll to the first item of the first section
const scrollToFirstSection = () => {
sectionListRef.current?.scrollToLocation({
sectionIndex: 0,
itemIndex: 0,
viewPosition: 0.5, // Center the item in the view
});
};

// Scroll to the first item of the 4th section
const scrollToSecondSection = () => {
sectionListRef.current?.scrollToLocation({
sectionIndex: 3,
itemIndex: 0,
viewPosition: 0.5, // Center the item in the view
});
};

return (





 item + index}
renderItem={({ item }) => (

{item}

)}
renderSectionHeader={({ section }) => (

{section.title}

)}
/>

);
};

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-0-re
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Android»