React Native FlatList通过Swipeable删除条目后布局错乱收缩问题

效果对比 #

• FlatList - 删除前
  
• FlatList - 删除后
  

React Native项目中，通过Swipeable滑动布局删除FlatList组件的条目后，FlatList出现布局错乱、整体收缩的异常问题。相关代码片段如下： #

1. FlatList 组件代码 #

<FlatList<GeneratedResults>
    data={serialNumbers}
    keyExtractor={item => item?.generatedDate}
    renderItem={({item, index}) => (
      <HistoryList
        deleteAction={deleteAction1}
        favouriteAction={favouriteAction}
        index={index}
        navigatetoAllNumbersScreen={navigatetoAllNumbersScreen}
        item={item}
        setRowRefs={setRowRefs}
        rowRefs={rowRefs}
      />
    )}
  />

2. 单条目组件（History List）代码 #

<Swipeable
    ref={ref => {
      if (ref && !rowRefs.get(index)) {
        const val = rowRefs.set(index, ref);
        setRowRefs(val);
      }
    }}
    onSwipeableWillOpen={() => {
      [...rowRefs.entries()].forEach(([key, ref]) => {
        if (key !== index && ref) {
          ref.close();
        }
      });
    }}
    renderRightActions={() => {
      return (
        <TouchableOpacity
          onPress={deleteOnPress}
          style={tw(' h-full justify-center')}>
          <Text style={tw('px-4 text-center py-3 text-xl bg-red text-white')}>
            Delete
          </Text>
        </TouchableOpacity>
      );
    }}
    renderLeftActions={() => {
      return (
        <TouchableOpacity
          disabled={item.isFavourite}
          onPress={favouriteOnPress}
          style={tw(' h-full justify-center')}>
          <Text
            style={tw('px-4 text-center py-3 text-xl bg-black text-white')}>
            {item.isFavourite ? 'Added to Favourite' : 'Favourite'}
          </Text>
        </TouchableOpacity>
      );
    }}>
    <View style={tw('flex-1 flex-row mx-2 my-3 items-center')}>
      <View
        style={tw(
          'rounded-full h-14 w-14  items-center justify-center bg-primary',
        )}>
        <Text style={tw('text-white text-xl')}>
          {item.generatedNumbers[0].charAt(0)}
        </Text>
      </View>
      <Text
        style={tw(
          'pl-2 text-xl bg-white text-black border-2 py-2 border-primary -mx-1.5 rounded flex-1',
        )}>
        {item.generatedDate}
      </Text>

      <View style={tw('w-14 h-full bg-lightGrey rounded flex-row')}>
        <Text style={tw('text-center text-xl text-white w-full self-center')}>
          {item.count}
        </Text>
      </View>

      <TouchableOpacity
        onPress={navigatetoAllNumbersScreenOnPress}
        style={tw('w-12 h-full bg-lightGreen rounded justify-center')}>
        <AntDesignIcon
          name="right"
          style={tw('self-center')}
          color={getColor('white')}
          size={25}
        />
      </TouchableOpacity>
    </View>
  </Swipeable>

3. 删除功能实现代码 #

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

4. useState 声明代码 #

const [serialNumbers, setSerialNumbers] = useState<GeneratedResults[]>();

5. setState 初始化赋值逻辑代码 #

useEffect(() => {
  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'],
    },
  ]);
}, []);

内容的提问来源于stack exchange，提问作者Kogilan Krishnansamy