删除项目后，Flatlist 会迷失方向/缩小

Question

平面列表 - 之前

平面列表 - 之后

在通过可滑动布局删除项目后，我的平面列表组件变得迷失方向并缩小。为了更好地理解我的问题，请参考以下代码 sn-ps。

1. 平面列表组件

    <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}
          />
        )}
      />

1. 单个项目（历史列表）

 <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>

1. 删除实施

  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'],
      },
    ]);
  }, []);

Answer 1

通过在 Flatlist 的 contentContainerStyle 属性中添加 flex-grow 属性并通过将 Tailwind 替换为 StyleSheet 来解决特定样式的问题。

Answer 2

当您在各个项目中使用 flex:1 并且您是 FlatList 时，它似乎没有特定的宽度：当它重新渲染时，FlatList 往往只包裹它的孩子，因为孩子只是试图填充他们的容器（使用flex:1），结果就是你得到的。

尝试将：width: "100%" 或配合 w-full 添加到您的 FlatList 样式中。