FlatList组件在可滚动列表中显示相似的结构化数据。它适用于大型数据列表,其中列表项的数量可能会随时间变化。 FlatList仅显示屏幕上当前正在显示的那些渲染元素,而不是一次显示列表中的所有元素。
FlatList组件需要两个必需的道具:data和renderItem。
为了实现FlatList组件,我们需要从“ react-native”库中导入FlatList。
在此示例中,我们为data prop属性提供了编码元素。data props中的每个元素都呈现为Text组件。
FlatList的ItemSeparatorComponent属性用于实现列表元素之间的分隔符。为了对列表项执行click事件,我们使用onPress属性来支持Text。
链接:https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-flatlist.html
来源:LearnFk无涯教程网
import React, { Component } from 'react'; import { AppRegistry, FlatList, StyleSheet, Text, View,Alert } from 'react-native'; export default class FlatListBasics extends Component { renderSeparator = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: "#000", }} /> ); }; //处理 onPress 动作 getListViewItem = (item) => { Alert.alert(item.key); } render() { return ( <View style={styles.container}> <FlatList data={[ {key: 'Android'},{key: 'iOS'}, {key: 'Java'},{key: 'Swift'}, {key: 'Php'},{key: 'Hadoop'},{key: 'Sap'}, {key: 'Python'},{key: 'Ajax'}, {key: 'C++'}, {key: 'Ruby'},{key: 'Rails'},{key: '.Net'}, {key: 'Perl'},{key: 'Sap'},{key: 'Python'}, {key: 'Ajax'}, {key: 'C++'},{key: 'Ruby'}, {key: 'Rails'},{key: '.Net'},{key: 'Perl'} ]} renderItem={({item}) => <Text style={styles.item} onPress={this.getListViewItem.bind(this, item)}>{item.key}</Text>} ItemSeparatorComponent={this.renderSeparator} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, item: { padding: 10, fontSize: 18, height: 44, }, }) AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);
输出:
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)