RN FlatList

RN列表开发， RN应该是3.0

注意版本

 

 

/**
 * Created by blocknew on 2019/10/15.
 */
/* jshint esversion: 6 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Alert,
    Button,
    Text,
    ToastAndroid,
    Touchable,
    TouchableWithoutFeedback,
    TouchableOpacity,
    FlatList,
    Image,
    RefreshControl,
    Platform,
} from 'react-native';


export default class HomePage extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            page: 1,
            isLoading: true,
            error: false,
            errorInfo: '',
            dataArray: [],
            showFoot: 0,
            isRefreshing: false,
        };
    }

    componentDidMount() {
        this.fetchData();
    }

    shouldComponentUpdate() {
        return true;
    }

    fetchData() {
        console.log('开始请求')//涉及公司， 可以用构造json代替
        var url = 'xxx'
        fetch(url, {
            method: 'POST',
            body: {
                page: 1,
            }
        }).then((response) => response.json())
            .then((responseData) => {
                console.log('请求完成');
                var datalist = [];
                // console.log(responseData);
                // console.log(responseData.result);
                var res = JSON.parse(responseData.result);
                datalist = res.data;
                console.log(this.state.dataArray.concat(datalist));

                this.setState({
                    isLoading: false,
                    isRefreshing: false,
                    dataArray: this.state.dataArray.concat(datalist)
                });

                this.setState({
                    isRefreshing: false,
                });
            }).catch((error) => {
                console.log(error);
        }).done();
    }

    render() {
        const navigate = this.props.navigation;
        var pic = {
            uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
        };

        return (
            
                
                    
                        地区
                    
                    
                    
                        类型
                    
                
                
                {/*列表视图*/}
                
                     this.createListItem(item)}
                        ListEmptyComponent={this.createEmptyView()}
                        ListHeaderComponent={this.createListHeader()}
                        ListFooterComponent={this.createListFooter()}
                        ItemSeparatorComponent={this.createSeparator}
                        refreshControl={
                             this.onRefresh()}/>
                        }
                        onEndReached={() => this.onLoadMore()}
                    />
                
            
        )
    }

    createListItem(item) {
        return (
             this.clickItem(item)}>
                
                    
        
        {item.demand}
        
    {item.customer.name}
        {item.customer.city}
        
        
        
            
        )
    }

    //分割线
    createSeparator() {
        return 

    }

    //顶部
    createListHeader() {
        return (
            
                全部发布
            
        )
    }

    //尾部
    createListFooter() {
        return (
            
                
            
        )
    }

    //空布局
    createEmptyView() {
        return (
            
                没有任何数据
            
        )
    }

    onRefresh() {
        Alert.alert('下拉刷新')
        this.setState({
            page: 1,
            isRefreshing: true,
            dataArray: []
        });
        this.fetchData()
    }

    onLoadMore() {
        console.log('加载完成');
    }

    clickItem(item) {
        Alert.alert(item.demand)
        // Actions.news({'url':'http://www.baidu.com'})
    }
}

const touchLeft = () => {
    Alert.alert('点击左侧');
};
const touchRight = () => {
    // ToastAndroid.show('点击右侧',ToastAndroid.SHORT);
    Alert.alert('点击右侧');
}

const styles = StyleSheet.create({
    bac: {
        backgroundColor: '#fff',
        flex: 1,
    },
    titleLine1: {
        marginTop: 0,
        height: 1,
        backgroundColor: '#dcdcdc',
    },
    titleview: {
        backgroundColor: '#f5f5f9',
        height: 50,
        marginTop: 0,
        flexDirection: 'row',
    },
    leftitle: {
        backgroundColor: '#f5f5f9',
        height: 50,
        lineHeight: 50,
        textAlign: 'center',
        flex: 1,
        fontSize: 16,
        alignItems: 'center',
        color: 'black',
    },
    midline: {
        marginTop: 10,
        height: 30,
        width: 1,
        backgroundColor: '#ccc',
    },
    righttitle: {
        backgroundColor: '#f5f5f9',
        height: 50,
        lineHeight: 50,
        textAlign: 'center',
        fontSize: 16,
        flex: 1,
        alignItems: 'center',
        color: 'black',
    },
    cotentview: {
        backgroundColor: '#fff',
        flex: 1,
        marginBottom: 0,
    },
    icon: {
        width: 60,
        height: 60,
    },
    itemstyle: {
        backgroundColor: '#fff',
        flexDirection: 'row',
        height: 120,
        flex: 1,
    },

})