Обратные плоские списки в React native

#reactjs #react-native

Вопрос:

я использовал Flatlist в своем приложении.

я хочу изменить эти плоские списки.

я попытался изменить свои данные ({allDataFiltered.reverse()}) в плоском списке ,

в первый раз он работает нормально, но не всегда.

 <SalaryCardFlatList
  inverted={true}
  data={allDataFiltered}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <AllSalaryCard
      month={item.MONTH_HEBREW}
      year={item.SHOTEF}
      amount={"₪ "   item.NETO_TASHLUM}
      cardColor={item.cardColor}
      handleActionFromParent={() => {
        goToSpecificSalaryScreen(item);
      }}
    />
  )}
/>;

я уже использую для этого inverted, но карты начинались с середины.

Как вы можете видеть, карточки начинались с середины.

это происходит под листом гистограммы.

Как я могу решить эту проблему?

1. используйте inverted={true} встроенный метод flatlist

2. эта проблема возникает из inverted .. я уже упоминал в своем коде.

3. является ли эта скрытая карта вашим первым объектом в вашем массиве? или вы можете назвать индекс этой карты?

4. они не скрыты. когда вы переходите к этому в первый раз, он отображается, как указано выше, и если вы прокручиваете. затем вы можете увидеть все карточки.

Ответ №1:

У меня нет общей картины вашего проекта, я создал небольшой проект для изменения букв алфавита.

https://snack.expo.dev/@emmbyiringiro/94b46d

Проверьте и дайте мне знать, чего вы хотите достичь.

1. const temp = […data].reverse(); это работает для меня.

2. Массивы и объекты являются ссылочными типами данных, Array.sort или array.reverse мутируют исходный массив. Эта мутация не запускает новый повторный запуск в React. Лучше всего этого избегать.

Ответ №2:

Попробуйте использовать sort() для allDataFiltered