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 (
            <View style={styles.bac}>
                <View style={styles.titleview}>
                    <TouchableWithoutFeedback onPress={touchLeft}>
                        <Text style={styles.leftitle}>地区</Text>
                    </TouchableWithoutFeedback>
                    <View style={styles.midline}></View>
                    <TouchableWithoutFeedback onPress={touchRight}>
                        <Text style={styles.righttitle}>类型</Text>
                    </TouchableWithoutFeedback>
                </View>
                <View style={styles.titleLine1}></View>
                {/*列表视图*/}
                <View style={styles.cotentview}>
                    <FlatList
                        data={this.state.dataArray}
                        renderItem={({item}) => this.createListItem(item)}
                        ListEmptyComponent={this.createEmptyView()}
                        ListHeaderComponent={this.createListHeader()}
                        ListFooterComponent={this.createListFooter()}
                        ItemSeparatorComponent={this.createSeparator}
                        refreshControl={
                            <RefreshControl refreshing={this.state.isRefreshing}
                                            onRefresh={() => this.onRefresh()}/>
                        }
                        onEndReached={() => this.onLoadMore()}
                    />
                </View>
            </View>
        )
    }

    createListItem(item) {
        return (
            <TouchableWithoutFeedback onPress={() => this.clickItem(item)}>
                <View style={styles.itemstyle}>
                    <Image style={{marginLeft: 10, marginTop: 15, width: 70, height: 70, borderRadius:5,flex:0.2}} source={{uri:item.customer.avatar}}/>
        <View style={{ flex:0.8}}>
        <Text style={{ marginTop: 10, marginLeft: 10, marginRight: 5, fontSize: 15, height:70,}}>{item.demand}</Text>
        <View style={{ flexDirection:'row', justifyContent: 'space-between',marginTop: 5}}>
    <Text style={{ color:'#333', fontSize:16,marginLeft:10 }}>{item.customer.name}</Text>
        <Text style={{ color:'#666',fontSize:14, marginRight:15}}>{item.customer.city}</Text>
        </View>
        </View>
        </View>
            </TouchableWithoutFeedback>
        )
    }

    //分割线
    createSeparator() {
        return <View style={{height: 1, backgroundColor: '#dcdcdc'}}/>

    }

    //顶部
    createListHeader() {
        return (
            <View style={{backgroundColor: '#eee', height: 35}}>
                <Text style={{marginTop: 10, marginLeft: 10, fontSize: 15}}>全部发布</Text>
            </View>
        )
    }

    //尾部
    createListFooter() {
        return (
            <View style={{backgroundColor: '#eee', height: 1}}>
                <Text></Text>
            </View>
        )
    }

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

    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,
    },

})