对应于原生应用组件，它可能是iOS的TableView，也可能是Android的ListView，RecycleView。

这些组件都有一些共同的特点：

1、视图可滚动。
2、可复用视图模板。
3、视图高度随着数据内容长度的变化而弹性变化。
4、自带性能优化。

ListView

由于一些缺点，已经过时了

FlatList

它是一个扁平化的列表，砍掉了section的支持，同时，增加了很多移动端常用的玩法：支持横向滑动，下拉刷新，separator，ScrollToIndex等。相比ListView，性能上也得到了巨大的提升，一般情况下，推荐使用FlatList。基本用法：

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

https://www.react-native.cn/docs/flatlist
tips:
隐藏滚动条，但是我不知道为啥API文档没有写，但是亲测有效

// 隐藏水平
showsHorizontalScrollIndicator={false}
// 隐藏垂直
showsVerticalScrollIndicator={false}

当改变 data 中的值，不会触发更新，原因是

所以这么改一下

const copyPatientsList = [...[], ...patientsList]
<FlatList
  data={copyPatientsList}
  // 指定一开始渲染的元素数量
  initialNumToRender={8}
  // 隐藏滚动条
  showsVerticalScrollIndicator={false}
  renderItem={renderItem}
  keyExtractor={(item) => item.caseCode}
  onEndReachedThreshold={0}
  // 列表被滚动到距离内容最底部
  onEndReached={(data) => {
    onEndReached();
  }}
/>

或者

{patientsList.map((item) => (
  <React.Fragment key={item.caseCode}></React.Fragment>
))}
<FlatList
  data={copyPatientsList}
  // 指定一开始渲染的元素数量
  initialNumToRender={8}
  // 隐藏滚动条
  showsVerticalScrollIndicator={false}
  renderItem={renderItem}
  keyExtractor={(item) => item.caseCode}
  onEndReachedThreshold={0}
  // 列表被滚动到距离内容最底部
  onEndReached={(data) => {
    onEndReached();
  }}
/>

还有可以给头部尾部加一些东西。

<FlatList
  data={contentAccuracySelectList.map((item) => ({ ...item }))}
  // 头部渲染
  ListHeaderComponent={mainRender()}
  // 没有数据的时候渲染
  ListEmptyComponent={Nodata}
  // 指定一开始渲染的元素数量
  initialNumToRender={8}
  // 隐藏滚动条
  showsVerticalScrollIndicator={false}
  renderItem={({ item, index }) => renderWhichItem({ item, index })}
  keyExtractor={(item, index) => item.relationSlug}
  onEndReachedThreshold={0}
  // 列表被滚动到距离内容最底部
  onEndReached={(data) => {
    onEndReached();
  }}
/>

SectionList

如果需要把列表进行分类展示，同时给每个分类设置头部，比如像地址，分类的产品，分类的相册等，SectionList就是最好的选择。

<SectionList
  renderItem={({item}) => <ListItem title={item.title} />}
  renderSectionHeader={({section}) => <H1 title={section.key} />}
  sections={[ // homogenous rendering between sections
​    {data: [...], key: ...},
​    {data: [...], key: ...}
  ]}
/>

VirtualizedList

如果你需要更强的定制化的列表，RN的FlatList和SectionList已经不能满足你要的效果，可以在VirtualizedList上增加Wrapper来实现你的定制化。