ReactNative基础（八）了解FlatList的使用、添加头尾布局、下拉刷新、上拉加载

此博客基于react-native-0.49.3

之前我们已经说过ListView这个控件了、FlatList性质也是一样的只不过使用起来更加封闭、内部封装好了 添加头尾布局、下拉刷新、上拉加载等功能…

实现的效果：

FlatList实现一个最简单的列表

<FlatList  //数据源  data={[{key: 'a'}, {key: 'b'}]}  //渲染每一个Item  renderItem={({item}) => <Text>{item.key}</Text>}/>

来实现一个见的最多的列表，从网络获取数据、解析并展示出来。

• 定义好数据源用来存储加载的网络数据

static defaultProps = {    url: 'https://news-at.zhihu.com/api/4/news/latest'};constructor(props) {    super(props);    this.state = {        data: [],//存储列表使用的数据        refreshing: false,//当前的刷新状态    };}

• 渲染FlatList组件

render() {    return (        <View style={styles.container}>            <FlatList                data={this.state.data}                keyExtractor={this.keyExtractor}                renderItem={this.getView}                //添加头尾布局                ListHeaderComponent={this.header}                ListFooterComponent={this.footer}                //下拉刷新，必须设置refreshing状态                onRefresh={this.onRefresh}                refreshing={this.state.refreshing}            />        </View>    );}

添加头尾布局使用ListHeaderComponent、ListFooterComponent 数据即可，关于FlatList组件更多的属性和方法可以参考官方文档

//头尾布局都是一样，这里就只贴出一个头布局以供参考header = () => {    return (        <Text style={{            backgroundColor: '#4398ff',            color: 'white',            fontSize: 18,            textAlign: 'center',            textAlignVertical: 'center',            height: 150,        }}>我是头布局</Text>    )};

请求网络数据加载列表数据

//渲染完成，请求网络数据componentDidMount() {    fetch(this.props.url)        .then((response) => response.json())        .then((response) => {            //解析json数据            var json = response['stories'];            //更新状态机            this.setState({                data: json,            });        })        .catch((error) => {            if (error) {                //网络错误处理                console.log('error', error);            }        });}

Item的布局这里就不贴出来了，可以前往文末的源码地址查看。

接下来就是对列表进行刷新操作。

下拉刷新，必须设置refreshing状态
onRefresh={this.onRefresh}
refreshing={this.state.refreshing}
当正在刷新的时候将refreshing=true这样在顶部就可以看到一个刷新的圆圈效果

/** * 下拉属性 */onRefresh = () => {    //设置刷新状态为正在刷新    this.setState({        refreshing: true,    });    //延时加载    const timer = setTimeout(() => {        clearTimeout(timer);        //往数组的第一位插入数据，模拟数据新增 , unshift()会返回数组的长度        this.state.data.unshift(new this.ItemData('https://pic2.zhimg.com/v2-8f11b41f995ca5340510c1def1c003d1.jpg',            '下拉刷新添加的数据——————' + this.count, 475843));        this.count++;        this.setState({            refreshing: false,        });    }, 1500);};

ItemData也就是每条数据的数据格式，这样往我们创建好的·data·数组中添加数据才是符合的。

/** * json 数据实体类 */ItemData(images, title, id) {    this.images = new Array(images);    this.title = title;    this.id = id;}

上拉加载：我这里配置下面两个属性的时候一直出不来效果不知道为什么,有会的大佬欢迎留言或者贴个源码地址，在此感谢大家了。

onEndReachedThreshold={0}onEndReached={this.onEndReached}

源码下载地址

推荐阅读：

• ReactNative基础（一）编写一个登录页面
• ReactNative基础（二）了解组件的生命周期
• ReactNative基础（三）了解ScrollView并打造一个Banner效果
• ReactNative基础（四）了解ListView的使用、实现GridView效果、编写一个真实网络请求案例
• ReactNative基础（五）使用react-navigation实现页面的跳转、参数的传递
• ReactNative基础（六）使用react-navigation实现页面导航布局效果（TabNavigator)
• ReactNative基础（七）js代码与原生代码进行交互、打包APK