FlatListView vs ListView infinite list demo

FlatListDemo.js

/**
 * 方案二：
 * 使用 FlatList 来实现的无限滚动列表
 */

import React, { Component } from "react";

import {
    View, 
    Text, 
    Image,
    StyleSheet,
    FlatList, 
    ActivityIndicator
} from "react-native";

console.disableYellowBox = true;

export default class FlatListDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            data: [],
            page: 1,
            seed: 1,
            error: null,
            refreshing: false,
        };
    }

    componentDidMount() {
        this.makeRemoteRequest();
    }

    makeRemoteRequest = () => {
        const { page, seed } = this.state;
        const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
        this.setState({ loading: true });
        fetch(url)
            .then(res => res.json())
            .then(res => {
                this.setState({
                    data: page === 1 ? res.results : [...this.state.data, ...res.results],
                    error: res.error || null,
                    loading: false,
                    refreshing: false
                });
            })
            .catch(error => {
                this.setState({ error, loading: false });
            });
    };

    renderItem = ({ item }) => {
        return (
            <View style={styles.item}>
              <Image source={{uri: item.picture.thumbnail}} style={styles.avatar} />
              <View style={styles.itemIn}>
                <Text>{item.name.first} {item.name.last}</Text>
                <Text>{item.email}</Text>
              </View>
            </View>
        );
    }

    renderSeparator = () => {
        return (
            <View style={{
                height: 1,
                width: "86%",
                backgroundColor: "#CED0CE",
                marginLeft: "14%"
            }}/>
        );
    }

    /**
     * not used
     * TODO remove
     */
    renderHeader = () => {
        // return <Swiper />;
        // return <Banner />;
        return <SearchBar placeholder="Type Here..." lightTheme round />;
    }

    /**
     * not used
     * TODO remove
     */
    renderFooter = () => {
        if (!this.state.loading) return null;
        return (
            <View
                style={{
                        paddingVertical: 20,
                        borderTopWidth: 1,
                        borderColor: "#CED0CE"
                    }}
            >
              <ActivityIndicator animating size="large" />
            </View>
        );        
    }

    handleRefresh = () => {
        this.setState({
            page: 1,
            refreshing: true,
            seed: this.state.seed + 1,
        }, () => {
            this.makeRemoteRequest();
        });
    }

    handleLoadMore = () => {
        this.setState({
            page: this.state.page + 1,
        }, () => {
            this.makeRemoteRequest();
        });
    }

    // ListHeaderComponent={this.renderHeader}
    // ListFooterComponent={this.renderFooter}

    render() {
        return (
            <FlatList data={this.state.data}
                      keyExtractor={(item, index) => index + '_' + item.email}
                      ItemSeparatorComponent={this.renderSeparator}
                      refreshing={this.state.refreshing}
                      onRefresh={this.handleRefresh}
                      onEndReached={this.handleLoadMore}
                      onEndThreshold={10}
                      removeClippedSubviews={false}
                      renderItem={this.renderItem} />
        );
    }
}

const styles = StyleSheet.create({
    item: {
        flexDirection: 'row',
        paddingTop: 5,
        paddingBottom: 5,
    },
    itemIn: {
        marginLeft: 10,
    },
    avatar: {
        width: 30,
        height: 30,
        borderRadius: 15,
        marginLeft: 3,
    },
});

ListViewDemo.js

/**
 * 方案一：
 * 使用 ListView 来实现的无限滚动列表
 */

import React, { Component } from "react";

import {
    View, 
    Text, 
    StyleSheet, 
    Image
} from "react-native";

import { InfiniteListView } from "react-native-infinite-listview";
import TimerMixin from 'react-timer-mixin';

console.disableYellowBox = true;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    item: {
        flexDirection: 'row',
        paddingTop: 5,
        paddingBottom: 5,
    },
    itemIn: {
        flex: 1,
        marginLeft: 10,
        borderBottomWidth: 1,
        paddingBottom: 8,
        borderBottomColor: 'rgba(0,0,0, 0.1)',
    },
    avatar: {
        width: 30,
        height: 30,
        borderRadius: 15,
        marginLeft: 3,
    },
});

export default class ListViewDemo extends Component {
    state = {
        isRefreshing: false,
        isLoadingMore: false,
        listItems: [],

        loading: false,
        page: 1,
        seed: 1,
        error: null,
        refreshing: false,
    }

    componentDidMount() {
        this.makeRemoteRequest();
    }

    onRefresh = () => {
        this.setState({ isRefreshing: true });
        setTimeout( () => {
            this.setState({ isRefreshing: false });
        }, 1000);
    };

    canLoadMoreContent = () => {
        console.log('#1', this.state.listItems.length);
        // return this.state.listItems.length < 50 && !this.state.isLoadingMore;
        return true;
    };

    makeRemoteRequest = () => {
        const { page, seed } = this.state;
        const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
        this.setState({ loading: true });
        fetch(url)
            .then(res => res.json())
            .then(res => {
                this.setState({
                    isLoadingMore: false,
                    listItems: page === 1 ? res.results : [...this.state.listItems, ...res.results],
                    error: res.error || null,
                    loading: false,
                    refreshing: false
                });
            })
            .catch(error => {
                this.setState({ error, loading: false });
            });
    };

    onLoadMore = () => {
        this.setState({
            page: this.state.page + 1,
        }, () => {
            this.makeRemoteRequest();
        });
    }

    renderRow = (item) => {
        return (
            <View style={styles.item}>
              <Image source={{uri: item.picture.thumbnail}} style={styles.avatar}/>
              <View style={styles.itemIn}>
                <Text>{item.name.first} {item.name.last}</Text>
                <Text>{item.email}</Text>
              </View>
            </View>
        );

        return (
            <ListItem roundAvatar
                      title={`${item.name.first} ${item.name.last}`}
                      subtitle={item.email}
                      containerStyle={{ borderBottomWidth: 0 }}                      
                      avatar={{ uri: item.picture.thumbnail }} />
        );
    }

    render() {
        return (
            <InfiniteListView
                style={styles.container}
                dataArray={this.state.listItems}
                renderRow={this.renderRow}
                onRefresh={this.onRefresh}
                isRefreshing={this.state.isRefreshing}
                canLoadMore={this.canLoadMoreContent}
                isLoadingMore={this.state.isLoadingMore}
                onLoadMore={this.onLoadMore}
            />
        );
    }
}