React Native-FlatList

最新推荐文章于 2025-09-10 11:40:21 发布

weixin_33948416

最新推荐文章于 2025-09-10 11:40:21 发布

阅读量101

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发

原文链接：https://juejin.im/post/5b3db489f265da0f931381b5

本文介绍如何在React Native中使用FlatList组件来高效地展示列表数据，并提供了具体的实现案例，包括设置data属性和renderItem方法的具体步骤。

刚通过视频了解一下ListView，没想到官网提示这货已经过期，建议使用FlatList或者SectionList代替，so！

搞过iOS开发的小伙伴对UITableView这个控件不陌生，基本用到的地方非常多，可以很方便的控制和展示列表数据。在RN中FlatList是一个高性能得简单列表组件，支持一下常见的功能：

完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。
支持跳转到指定行（ScrollToIndex）。

废话不多说，上栗子：

var hisArr = require('./history.json');

class MyHistory extends Component {

    //  指定使用id作为列表每一项的key
    _keyExtractor = (item, index) => item.id;

    btnClicked(title) {
        Alert.alert("提示", "我点击了" + title, [{text:'确定', onPress:()=> console.log('点击了确定按钮'), style:'cancel'}]);
    }

    updateItem({item}) {
        return (
            <View style={styles.itemView}>
                <Image style={styles.itemImg} source={{uri:item.icon}} />
                <Text style={styles.showText}>{item.modelName}</Text>
                <Text style={styles.showText}>{item.licenseNo}</Text>
                <TouchableOpacity style={styles.itemBtn} onPress={this.btnClicked.bind(this, item.modelName)}>
                    <Text style={styles.btnTitle}>询价</Text>
                </TouchableOpacity>
            </View>
        );
    }

    render(){
        return (
            <FlatList
                style={styles.flatList}
                data={hisArr}
                renderItem={this.updateItem}
                keyExtractor={this._keyExtractor}/>
        );
    }
}复制代码

然而想象是美好的，出现了一个错误：

然而此刻：

最终在一篇文章的评论中看到别人写的renderItem方法里面实现了bind方法，才恍然大悟。

最终代码如下：

var hisArr = require('./history.json');

class MyHistory extends Component {

    //  指定使用id作为列表每一项的key
    _keyExtractor = (item, index) => item.id;

    btnClicked(title) {
        Alert.alert("提示", "我点击了" + title, [{text:'确定', onPress:()=> console.log('点击了确定按钮'), style:'cancel'}]);
    }

    updateItem({item}) {
        return (
            <View style={styles.itemView}>
                <Image style={styles.itemImg} source={{uri:item.icon}} />
                <Text style={styles.showText}>{item.modelName}</Text>
                <Text style={styles.showText}>{item.licenseNo}</Text>
                <TouchableOpacity style={styles.itemBtn} onPress={this.btnClicked.bind(this, item.modelName)}>
                    <Text style={styles.btnTitle}>询价</Text>
                </TouchableOpacity>
            </View>
        );
    }

    render(){
        return (
            <FlatList
                style={styles.flatList}
                data={hisArr}
                renderItem={this.updateItem.bind(this)}
                keyExtractor={this._keyExtractor}/>
        );
    }
}复制代码

当然也可以使用下面的方法去避免上面的错误：

var hisArr = require('./history.json');

class MyHistory extends Component {

    //  指定使用id作为列表每一项的key
    _keyExtractor = (item, index) => item.id;

    updateItem({item}) {
        return (
            <View style={styles.itemView}>
                <Image style={styles.itemImg} source={{uri:item.icon}} />
                <Text style={styles.showText}>{item.modelName}</Text>
                <Text style={styles.showText}>{item.licenseNo}</Text>
                <TouchableOpacity style={styles.itemBtn} onPress={() => {Alert.alert("提示", "我点击了" + item.modelName, [{text:'确定', onPress:()=> console.log('点击了确定按钮'), style:'cancel'}])}}>
                    <Text style={styles.btnTitle}>询价</Text>
                </TouchableOpacity>
            </View>
        );
    }

    render(){
        return (
            <FlatList
                style={styles.flatList}
                data={hisArr}
                renderItem={this.updateItem}
                keyExtractor={this._keyExtractor}/>
        );
    }
}复制代码