reactNative长列表

最新推荐文章于 2024-08-02 23:59:35 发布

yummf

最新推荐文章于 2024-08-02 23:59:35 发布

阅读量272

点赞数

文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/weixin_53911951/article/details/126009435

版权

reactNative长列表

React Native 提供了几个适用于展示长列表数据的组件，一般而言我们会选用FlatList或是SectionList。

FlatList

FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。
FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。

下面的例子创建了一个简单的FlatList，并预设了一些模拟数据。首先是初始化FlatList所需的data，其中的每一项（行）数据之后都在renderItem中被渲染成了Text组件，最后构成整个FlatList。

import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

const date = [
 { key: 'Devin' },
 { key: 'Dan' },
 { key: 'Dominic' },
 { key: 'Jackson' },
 { key: 'James' },
 { key: 'Joel' },
 { key: 'John' },
 { key: 'Jillian' },
 { key: 'Jimmy' },
 { key: 'Julie' },
];
const styles = StyleSheet.create({
 container: {
   flex: 1,
   paddingTop: 22,
 },
 item: {
   padding: 10,
   fontSize: 18,
   height: 44,
 },
});

const FlatListBasics = () => {
 return (
   <View style={styles.container}>
     <FlatList
       data={date}
       renderItem={({ item }) => <Text style={styles.item}>{item.key}</Text>}
     />
   </View>
 );
};

export default FlatListBasics;

如果要渲染的是一组需要分组的数据，也许还带有分组标签的，那么SectionList将是个不错的选择

import React from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';

const date = [
 { title: 'D', data: ['Devin', 'Dan', 'Dominic'] },
 {
   title: 'J',
   data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie'],
 },
];
const styles = StyleSheet.create({
 container: {
   flex: 1,
   paddingTop: 22,
 },
 sectionHeader: {
   paddingTop: 2,
   paddingLeft: 10,
   paddingRight: 10,
   paddingBottom: 2,
   fontSize: 14,
   fontWeight: 'bold',
   backgroundColor: 'rgba(247,247,247,1.0)',
 },
 item: {
   padding: 10,
   fontSize: 18,
   height: 44,
 },
});

const SectionListBasics = () => {
 return (
   <View style={styles.container}>
     <SectionList
       sections={date}
       renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
       renderSectionHeader={({ section }) => (
         <Text style={styles.sectionHeader}>{section.title}</Text>
       )}
       keyExtractor={(item, index) => index}
     />
   </View>
 );
};

export default SectionListBasics;