使用长列表

FlatList

FlatListBasics.js

/**
 * Created by zhoujian on 2019/4/9.
 */


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

export default class FlatListBasics extends Component {
    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={[
                        {name: 'Devin'},
                        {name: 'Jackson'},
                        {name: 'James'},
                        {name: 'Joel'},
                        {name: 'John'},
                        {name: 'Jillian'},
                        {name: 'Jimmy'},
                        {name: 'Julie'},
                    ]}
                    renderItem={({item}) => <Text style={styles.item}>{item.name}</Text>}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
})

 

 

 

 

 

 

 SectionList

 

SectionListBasics.js

/**
 * Created by zhoujian on 2019/4/9.
 */

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

export default class SectionListBasics extends Component {

    render() {
        return (
            <View style={styles.container}>
                <SectionList
                    sections={[
                        {title: 'D', data: ['Devin']},
                        {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
                    ]}
                    renderItem={ ({item}) => <Text style={styles.item}>{item}</Text>}
                    renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
                    keyExtractor={(item, index) => index}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)',
    },
})

 

 

index.js

 

import {AppRegistry} from 'react-native';
import SectionListBasics from './js/SectionListBasics';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => SectionListBasics);