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