React Native常用组件-列表组件

ScrollView

用来当屏幕宽度或者高度不足以展示所有内容时进行滚动展示的组件，它的用法和View类似，但是必须有一个确定的高度，或者使用 style={{flex: 1}}。

常用的属性：

horizontal：值为true，子视图会在水平方向上排列，默认值为false，即垂直方向上排列
showsVerticalScrollIndicator：值为true，显示一个垂直方向的滚动条
keyboardShouldPersistTaps：如果当前界面有键盘，那么点击 scrollview 组件后是否收起键盘，可选值有三个：

1. never（默认值）：点击 TextInput 以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件
2. always：键盘不会自动收起，ScrollView 也不会捕捉点击事件，但子组件可以捕获
3. handled：当点击事件被子组件捕获时，键盘不会自动收起。这样切换 TextInput 时键盘可以保持状态。多数带有TextInput 的情况下你应该选择此项

常用的事件：

onMomentumScrollEnd：滚动结束时调用此方法

例子：

import React from 'react';
import { ScrollView, Text } from 'react-native';

const Example = () => (
  <ScrollView style={{ flex: 1 }}>
    <Text>滚动视图中的内容</Text>
  </ScrollView>
);

export default Example;

FlatList

用于高效地渲染滚动列表，适用于长列表数据。
常用的属性：

data：列表数据，目前只支持数组
ListEmptyComponent：设置列表为空时的组件
ListFooterComponent：设置尾部组件
ListHeaderComponent：设置头部组件
refreshing：属性值为true，列表就会显示出一个正在加载的符号
keyExtractor：用于为给定的item生成一个不重复的key，默认抽取item.key作为key值，若item.key不存在，则使用数组下标
renderItem：根据数据data渲染每一行的组件
onEndReachedThreshold：距离底部多远触发onEndReached事件，值为数字，例如值为0.5，则表示距离底部的距离为当前列表可见长度的一半
refreshControl：该属性需要配合RN的RefreshControl组件使用，以实现下拉更新的功能

常用的事件：

onEndReached：当列表被滚动到距离内容底部的某个距离时调用，距离底部多远由onEndReachedThreshold控制

例子：

import React, { useState } from 'react';
import { FlatList, Text, RefreshControl } from 'react-native';
import EmptyRecordComponent from '@src/components/EmptyRecordComponent'
import ListFooter from '@src/components/ListFooter'

const Example = () => {
  const [items, setItems] = useState(['第一项', '第二项', '第三项']);
  const [loading, setLoading] = useState(true)
  const refresh = () => {}
  const loadMore = () => {}

  return (
    <FlatList
      data={items}
      renderItem={({ item }) => <Text>{item}</Text>}
      keyExtractor={(item, index) => index.toString()}
      ListEmptyComponent={<EmptyRecordComponent />}
      ListFooterComponent={<ListFooter />}
      refreshing={loading}
      refreshControl={
        <RefreshControl
          tintColor="#f69906"
          colors={['#f69906']}
          refreshing={loading}
          onRefresh={() => { refresh() }}
        />
      }
      onEndReachedThreshold={0.1}
      onEndReached={() => { loadMore() }}
    />
  );
};

export default Example;

RefreshControl

通常用在ScrollView或FlatList内部，为其添加下拉刷新的功能。
常用的属性：

refreshing：属性值为true，列表就会显示出一个正在加载的符号
tintColor：设置正在加载符号的颜色，用于iOS
colors：值为数组，设置正在加载符号的颜色，用于Android

常用的事件：

onRefresh：视图刷新时调用该方法

例子：

// 参考FlatList的例子