Реагировать на нативный плоский список перенаправляется вверх, когда какой-либо элемент изменяется в представлении вкладок

Я использую response-native-community / react-native-tab-view для рендеринга двух плоских списков, которые в основном представляют собой контрольные списки с флажками в них.

Код для плоского списка возвращается из:

const ListRoute = () => {
return (
 <FlatList
   data={data}
   renderItem={({item, index}) => {
     return (
       <View>
         <Item
           ...checkbox code
         />
       </View>
     );
   }}
   keyExtractor={(item, index) => item.id + '1'}
   listKey={(item, index) => item.id + '2'}
   removeClippedSubviews={true}
   extraData={(updateItem, subscriptionItems)}
 />
);
};

И код представления вкладки

<TabView
renderTabBar={ChallengeTabBar}
navigationState={{index, routes}}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>

Со сценой рендеринга как

  const renderScene = SceneMap({
    first: ListRoute,
    second: FriendRoute,
  });

Флажок берет функцию updateItem из основного функционального класса и добавляет ее идентификатор в список отмеченных флажков. Когда я использую функцию listRoute, щелчок по флажку приводит к повторной отрисовке всего плоского списка и перемещению пользователя в верхнюю часть списка. Если я не использую функцию и просто помещаю плоский список сам по себе, этого не происходит.

Изменить: после дальнейшего исследования похоже, что если я полностью удалю часть представления вкладок, у меня все равно будет та же проблема. Если я просто вставлю плоский список, то список не будет перенаправлен наверх, но если я вставлю компонент, он будет.


react-native react-native-flatlist react-native-tab-view
person user2086359    schedule 30.05.2020    source источник
comment
у меня тоже такая же проблема: snack.expo.io/@luckyamit/9905d4 У меня есть также разместил вопрос: stackoverflow.com/questions/62247541/   -  person luckyamit    schedule 08.06.2020
comment
Вы нашли какое-нибудь решение. если да, то дайте мне знать   -  person luckyamit    schedule 08.06.2020
comment
К сожалению, нет, однако я упростил проблему и разместил здесь более простые примеры: stackoverflow.com/questions/62261038/   -  person user2086359    schedule 08.06.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны использовать useEffect, чтобы избежать повторного рендеринга FlatList. Вам нужно проверить неизменяемость означает, что вы хотите заменить данные плоского списка. используйте метод фильтрации для установки флажка.

person Shahid ali    schedule 30.05.2020
comment
Не могли бы вы добавить подробности для этого? в настоящее время, чтобы указать, установлен ли флажок, я использую items.includes (x.id), чтобы проверить, включает ли список завершенных элементов идентификатор флажка. Вы предлагаете использовать items.filter (item = ›item === x), чтобы указать, установлен ли вместо этого флажок? Что я должен использовать здесь Эффект? - person user2086359; 31.05.2020
comment
Я просмотрел предоставленную экспозицию, но, к сожалению, если вы переместите плоский список в константу, как мне это нужно для просмотра вкладок, вы получите ту же проблему, когда щелчок по элементу в нижней части списка вернет вас обратно наверх. Я сохранил здесь то, что имею в виду: snack.expo.io/ecO7YYlVZ - person user2086359; 08.06.2020