<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

• 通過綁定onPressItem處理程序，props將保持===並且PureComponent將防止浪費的重新呈現，除非實際的id，selected或title props改變，即使在MyListItem中呈現的組件沒有這樣的優化。
• 通過將extraData = {this.state}傳遞給FlatList，我們確保當state.selected更改時，FlatList本身將重新呈現。如果不設置此prop，FlatList將不知道它需要重新渲染任何項目，因為它也是PureComponent，並且prop比較不會顯示任何更改。
• keyExtractor告訴列表使用反應鍵的id而不是默認的鍵屬性。

class MyListItem extends React.PureComponent {
  _onPress = () => {
    this.props.onPressItem(this.props.id);
  };

  render() {
    const textColor = this.props.selected ? "red" : "black";
    return (
      <TouchableOpacity onPress={this._onPress}>
        <View>
          <Text style={{ color: textColor }}>
            {this.props.title}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }
}

class MultiSelectList extends React.PureComponent {
  state = {selected: (new Map(): Map<string, boolean>)};

  _keyExtractor = (item, index) => item.id;

  _onPressItem = (id: string) => {
    // updater functions are preferred for transactional updates
    this.setState((state) => {
      // copy the map rather than modifying state.
      const selected = new Map(state.selected);
      selected.set(id, !selected.get(id)); // toggle
      return {selected};
    });
  };

  _renderItem = ({item}) => (
    <MyListItem
      id={item.id}
      onPressItem={this._onPressItem}
      selected={!!this.state.selected.get(item.id)}
      title={item.title}
    />
  );

  render() {
    return (
      <FlatList
        data={this.props.data}
        extraData={this.state}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      />
    );
  }
}

• 當內容滾出渲染窗口時，不會保留內部狀態。確保在項目數據或外部存儲（如Flux，Redux或Relay）中捕獲所有數據。
• 這是一個PureComponent，這意味著如果道具保持淺層相等，它將不會重新渲染。確保renderItem函數所依賴的所有內容在更新後作為prop（例如extraData）傳遞，而不是===，否則您的UI可能無法更新更新。這包括數據prop和父組件狀態。
• 為了限制內存並啟用平滑滾動，內容在屏幕外異步呈現。這意味著可以比填充率更快地滾動並暫時看到空白內容。這是一個可以調整以適應每個應用程序需求的權衡，我們正在努力在幕後進行改進。
• 默認情況下，列表在每個項目上查找關鍵支柱，並將其用於React鍵。或者，您可以提供自定義keyExtractor道具。

Props

• ScrollView props...
• VirtualizedList props...
• renderItem
• data
• ItemSeparatorComponent
• ListEmptyComponent
• ListFooterComponent
• ListHeaderComponent
• columnWrapperStyle
• extraData
• getItemLayout
• horizontal
• initialNumToRender
• initialScrollIndex
• inverted
• keyExtractor
• numColumns
• onEndReached
• onEndReachedThreshold
• onRefresh
• onViewableItemsChanged
• progressViewOffset
• legacyImplementation
• refreshing
• removeClippedSubviews
• viewabilityConfig
• viewabilityConfigCallbackPairs

方法

• scrollToEnd
• scrollToIndex
• scrollToItem
• scrollToOffset
• recordInteraction
• flashScrollIndicators

Reference

Props

renderItem

renderItem({ item: Object, index: number, separators: { highlight: Function, unhighlight: Function, updateProps: Function(select: string, newProps: Object) } }) => ?React.Element

<FlatList
  ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
    <View style={[style.separator, highlighted && {marginLeft: 0}]} />
  )}
  data={[{title: 'Title Text', key: 'item1'}]}
  renderItem={({item, separators}) => (
    <TouchableHighlight
      onPress={() => this._onPress(item)}
      onShowUnderlay={separators.highlight}
      onHideUnderlay={separators.unhighlight}>
      <View style={{backgroundColor: 'white'}}>
        <Text>{item.title}</Text>
      </View>
    </TouchableHighlight>
  )}
/>

data

ItemSeparatorComponent

ListEmptyComponent

ListFooterComponent

ListHeaderComponent

columnWrapperStyle

extraData

getItemLayout

(data, index) => {length: number, offset: number, index: number}

  getItemLayout={(data, index) => (
    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
  )}

horizontal

initialNumToRender

initialScrollIndex

inverted

keyExtractor

(item: object, index: number) => string;

numColumns

onEndReached

(info: {distanceFromEnd: number}) => void

onEndReachedThreshold

onRefresh

() => void

onViewableItemsChanged

(info: {
    viewableItems: array,
    changed: array,
  }) => void

progressViewOffset

legacyImplementation

refreshing

removeClippedSubviews

注意：在某些情況下可能存在錯誤（缺少內容） - 使用風險自負。

viewabilityConfig

  Error: Changing viewabilityConfig on the fly is not supported`

constructor (props) {
  super(props)

  this.viewabilityConfig = {
      waitForInteraction: true,
      viewAreaCoveragePercentThreshold: 95
  }
}

<FlatList
    viewabilityConfig={this.viewabilityConfig}
  ...

minimumViewTime

viewAreaCoveragePercentThreshold

itemVisiblePercentThreshold

waitForInteraction

viewabilityConfigCallbackPairs

方法

scrollToEnd()

scrollToEnd([params]);

• 'animated'（boolean） - 列表是否應該在滾動時執行動畫。默認為true。

scrollToIndex()

scrollToIndex(params);

注意：如果不指定getItemLayout prop，則無法滾動到渲染窗口之外的位置。

• 'animated' (boolean) - 列表是否應該在滾動時執行動畫。默認為true。
• 'index' (number) - 要滾動到的索引。需要。
• 'viewOffset' (number) - 用於偏移最終目標位置的固定像素數。需要。
• 'viewPosition' (number) - 值為0時，index指定的項目位於頂部，1位於底部，0.5位於中間。

scrollToItem()

scrollToItem(params);

注意：如果不指定getItemLayout prop，則無法滾動到渲染窗口之外的位置。

• 'animated' (boolean) - 要滾動到的偏移量。在水平為真的情況下，偏移是x值，在任何其他情況下，偏移是y值。需要。
• 'item' (object) - 列表是否應該在滾動時執行動畫。默認為true。
• 'viewPosition' (number)

scrollToOffset()

scrollToOffset(params);

• 'offset' (number) - 要滾動到的偏移量。在水平為真的情況下，偏移是x值，在任何其他情況下，偏移是y值。需要。
• 'animated' (boolean) - 列表是否應該在滾動時執行動畫。默認為true。

recordInteraction()

recordInteraction();

flashScrollIndicators()

flashScrollIndicators();