react-native支付宝，微信支付对接接口

最新推荐文章于 2025-07-05 13:07:54 发布

I-T枭

最新推荐文章于 2025-07-05 13:07:54 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： React Native 移动端

本文链接：https://blog.youkuaiyun.com/hahahhahahahha123456/article/details/80986455

React Native 同时被 2 个专栏收录

65 篇文章

订阅专栏

移动端

6 篇文章

订阅专栏

本文介绍了一个使用React Native实现的房东结算记录展示应用。该应用通过调用API获取水电及房租统计数据，并采用GiftedListView组件分页加载和展示结算记录详情。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo如下：

import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View ,TouchableHighlight} from 'react-native';
import GiftedListView from 'react-native-gifted-listview';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { httpGet } from '../../utils/ajax';
import { formatMoney, getDate, getTime } from '../../utils/utils';
import Header from '../normal/header';
import { CommonStyles } from '../styles/common';


class LBill extends Component {
    static navigationOptions = ({ navigation }) => {
        return {
            header: null,
        };
    };

    constructor(props) {
        super(props);

        this.state = {
            pendingCount: 0,
            totalCount: 0,
            pageSize: 5,
            sumMoney: 0,
            sumRent: 0,
            sumExpense: 0,
        };
    }

    componentDidMount() {
        // 获取水电统计信息
        httpGet('bill/landlordStatis').then(data => {
            this.setState({
                sumMoney: data.data.sumMoney,
                sumRent: data.data.sumRent,
                sumExpense: data.data.sumExpense,
            });
        });
    }

    _onFetch(page = 1, callback, options) {
        httpGet('bill/listByLandlordID?pageIndex=' + page + '&pageSize=' + this.state.pageSize).then((data) => {
            this.setState({ totalCount: data.data.recordCount });
            if (page === data.data.pageCount) {
                callback(data.data.items, { allLoaded: true });
            } else {
                callback(data.data.items);
            }
        });
    }

    handleEstate=(estate,timeLine)=>{
        //alert(estateid);
        //alert(timeLine);
        navigation.navigate('LbillDetail',{estate:estate,timeLine:timeLine}); 
    }

    _renderRowView(item) {
        const { navigation } = this.props;
        let timeLine=<Text>{item.timeline}</Text>
        let estateitems_h=item.items.map((e_item,index)=>{
            return <TouchableOpacity style={styles.itemContainer} onPress={this.handleEstate.bind(this,e_item,item.timeline)}  >
                        <View style={{ flex: 1 }}>
                            <View style={styles.view_item}>
                                <Text style={styles.item_text}>房源名称：{e_item.estatename}</Text>
                                <Text style={[styles.item_text, { paddingLeft: 50 }]}>房租：{formatMoney(e_item.totalrent / 100)}元</Text>
                            </View>
                            <View style={styles.view_item}>
                                <Text style={styles.item_text}>物业费：{formatMoney(e_item.totalexpense / 100)}元</Text>
                                <Text style={[styles.item_text, { paddingLeft: 50 }]}>水电费:{formatMoney(e_item.totalmoney / 100)}元</Text>
                            </View>
                        </View>
                        <View style={{ width: 20, justifyContent: 'center' }}>
                            <Ionicons name="ios-arrow-forward" size={28}></Ionicons>
                        </View>
                    </TouchableOpacity>
        });
        return (
            <View>
                <View style={styles.billHeaderTitle}>
                    {timeLine}
                </View>
                {estateitems_h}
            </View>
        );
    }

    _renderPaginationWaitingView(paginateCallback) {
        return (
            <TouchableHighlight onPress={paginateCallback} style={CommonStyles.paginationView}>
                <Text style={CommonStyles.paginationText}>加载更多...</Text>
            </TouchableHighlight>
        );
    }

    _renderPaginationAllLoadedView() {
        return (
            <View style={CommonStyles.paginationView}>
                <Text style={CommonStyles.paginationText}>加载完毕~</Text>
            </View>
        );
    }

    _renderEmptyView(refreshCallback) {
        return (
            <View style={CommonStyles.emptyView}>
                <Text style={CommonStyles.emptyText}>~~暂时没有显示内容</Text>
            </View>
        );
    }

    render() {
        const { navigation } = this.props;
        return (
            <View style={CommonStyles.container}>
                <Header title='结算记录' backScreen='Main' navigation={navigation} />
                <View style={[CommonStyles.headerContainer, { flexDirection: 'row' }]}>
                    <View style={[CommonStyles.headerItemContainer,styles.itemBorder,styles.item]}>
                        <Text style={[CommonStyles.billTxtContent,{fontSize:18}]}>{formatMoney(this.state.sumRent / 100)}</Text>
                        <Text style={CommonStyles.billTxtTitle}>房租(元)</Text>
                    </View>
                    <View style={[CommonStyles.headerItemContainer,styles.itemBorder,styles.item]}>
                        <Text style={[CommonStyles.billTxtContent,{fontSize:18}]}>{formatMoney(this.state.sumExpense / 100)}</Text>
                        <Text style={CommonStyles.billTxtTitle}>物业费(元)</Text>
                    </View>
                    <View style={[CommonStyles.headerItemContainer,styles.item]}>
                        <Text style={[CommonStyles.billTxtContent,{fontSize:18}]}>{formatMoney(this.state.sumMoney / 100)}</Text>
                        <Text style={CommonStyles.billTxtTitle}>水电费(元)</Text>
                    </View>
                </View>
                {/* 结算记录轴 */}
                <GiftedListView
                    rowView={this._renderRowView.bind(this)}
                    paginationWaitingView={this._renderPaginationWaitingView.bind(this)}
                    paginationAllLoadedView={this._renderPaginationAllLoadedView.bind(this)}
                    onFetch={this._onFetch.bind(this)}
                    firstLoader={true}
                    pagination={true}
                    refreshable={true}
                    withSections={false}
                    emptyView={this._renderEmptyView}
                    customStyles={{
                        paginationView: {
                            backgroundColor: '#FFFFFF',
                        },
                    }}
                    refreshableTintColor="blue"
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    itemContainer: {
        paddingLeft: 10,
        paddingRight: 10,
        height: 60,
        paddingTop: 10,
        borderStyle: 'solid',
        borderBottomColor: '#EAE9E9',
        borderBottomWidth: 1,
        flexDirection: 'row'
    },
    item:{
        height:40,
        flex:1,
        minWidth:80
    },
    item_text: {
        fontSize: 12,
        flex: 1,
        justifyContent: 'center'
    },
    itemBorder:{
        borderRightColor:'#fff',
        borderRightWidth:1,
        borderStyle:'solid',
    },
    view_item: {
        flex: 1,
        width: '100%',
        height: 20,
        lineHeight: 20,
        flexDirection: 'row',
    },
    billHeaderTitle: {
        width: '100%',
        paddingLeft: 10,
        paddingRight: 10,
        height: 40,
        backgroundColor: '#EBEBEB',
        justifyContent: 'center',
        //   alignItems:'center'
    }
});

export default LBill