Блог

Плоский список — До

Плоский список — После

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

1. Компонент плоского списка

 lt;FlatListlt;GeneratedResultsgt;  data={serialNumbers}  keyExtractor={item =gt; item?.generatedDate}  renderItem={({item, index}) =gt; (  lt;HistoryList  deleteAction={deleteAction1}  favouriteAction={favouriteAction}  index={index}  navigatetoAllNumbersScreen={navigatetoAllNumbersScreen}  item={item}  setRowRefs={setRowRefs}  rowRefs={rowRefs}  /gt;  )}  /gt;  

2. Отдельный элемент (Список истории)

 lt;Swipeable  ref={ref =gt; {  if (ref amp;amp; !rowRefs.get(index)) {  const val = rowRefs.set(index, ref);  setRowRefs(val);  }  }}  onSwipeableWillOpen={() =gt; {  [...rowRefs.entries()].forEach(([key, ref]) =gt; {  if (key !== index amp;amp; ref) {  ref.close();  }  });  }}  renderRightActions={() =gt; {  return (  lt;TouchableOpacity  onPress={deleteOnPress}  style={tw(' h-full justify-center')}gt;  lt;Text style={tw('px-4 text-center py-3 text-xl bg-red text-white')}gt;  Delete  lt;/Textgt;  lt;/TouchableOpacitygt;  );  }}  renderLeftActions={() =gt; {  return (  lt;TouchableOpacity  disabled={item.isFavourite}  onPress={favouriteOnPress}  style={tw(' h-full justify-center')}gt;  lt;Text  style={tw('px-4 text-center py-3 text-xl bg-black text-white')}gt;  {item.isFavourite ? 'Added to Favourite' : 'Favourite'}  lt;/Textgt;  lt;/TouchableOpacitygt;  );  }}gt;  lt;View style={tw('flex-1 flex-row mx-2 my-3 items-center')}gt;  lt;View  style={tw(  'rounded-full h-14 w-14 items-center justify-center bg-primary',  )}gt;  lt;Text style={tw('text-white text-xl')}gt;  {item.generatedNumbers[0].charAt(0)}  lt;/Textgt;  lt;/Viewgt;  lt;Text  style={tw(  'pl-2 text-xl bg-white text-black border-2 py-2 border-primary -mx-1.5 rounded flex-1',  )}gt;  {item.generatedDate}  lt;/Textgt;   lt;View style={tw('w-14 h-full bg-lightGrey rounded flex-row')}gt;  lt;Text style={tw('text-center text-xl text-white w-full self-center')}gt;  {item.count}  lt;/Textgt;  lt;/Viewgt;   lt;TouchableOpacity  onPress={navigatetoAllNumbersScreenOnPress}  style={tw('w-12 h-full bg-lightGreen rounded justify-center')}gt;  lt;AntDesignIcon  name="right"  style={tw('self-center')}  color={getColor('white')}  size={25}  /gt;  lt;/TouchableOpacitygt;  lt;/Viewgt;  lt;/Swipeablegt;  

3. Delete Implementation

 const deleteAction1 = (date: string, index: number) =gt; {   const newArrayAfterRemovedItem = _.reject(serialNumbers, {  generatedDate: date,  });  setSerialNumbers(newArrayAfterRemovedItem);  };  

4. Декларация useState

 const [serialNumbers, setSerialNumbers] = useStatelt;GeneratedResults[]gt;();  

5. Инициализация с помощью setState

 useEffect(() =gt; {  setSerialNumbers([  {  generatedDate: 'bac',  isFavourite: false,  count: 100,  generatedNumbers: ['123', '32', '43', '23'],  },  {  generatedDate: 'abcx',  isFavourite: false,  count: 100,  generatedNumbers: ['123', '32', '43', '23'],  },  {  generatedDate: 'abcxgf',  isFavourite: false,  count: 100,  generatedNumbers: ['123', '32', '43', '23'],  },  ]);  }, []);  

Поскольку вы используете flex:1 в своих отдельных элементах, и то, что вы являетесь плоским списком, похоже, не имеет определенной ширины: при повторной визуализации плоский список имеет тенденцию обертывать только своих дочерних элементов, и поскольку дети просто пытаются заполнить свой контейнер (с flex:1 ), результат-то, что вы получили.

Попробуйте добавить : width: "100%" или с попутным w-full ветром в свой стиль плоского списка.

Проблема была устранена путем добавления свойства flex-grow в реквизит contentContainerStyle Flatlist и замены Tailwind таблицей стилей для определенного стиля.