FlatList

多选操作

假设需要一个支持多选操作的列表，代码如下：

const HomeScreen = ({navigation, route}: Props) => {
  const [data, setData] = useState<string[]>(['1', '2', '3']);
  const [selectable, setSelectable] = useState(false);
  const [selectedSet, setSelectedSet] = useState(new Set<string>());

  const renderItem = ({item}: ListRenderItemInfo<string>) => {
    let isSelected = selectedSet.has(item);
    return (
      <TestItem selectable={selectable} isSelected={isSelected} title={item} />
    );
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      <FlatList
        style={{flex: 1}}
        data={data}
        windowSize={3}
        renderItem={renderItem}
      />
    </SafeAreaView>
  );
};

这里有一个很重要的特性，就是当selectable或者selectedSet改变触发组件渲染时，也会触发FlatList重新渲染他的item（之前认为只有改变data才会）。