react native 團隊頁面 思路跳坑

React Native 版本執行0.57的規則

後臺出了一個接口，根據不同的參數獲取不同的團隊信息。剛開始做的時候，一個接口調了兩次，因爲異步的問題不能根據設想的步驟先出現一級團隊，再出現二級團隊，問題比較奇葩，所以定義了兩個方法 。

import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, Image, ImageBackground, TouchableOpacity, StatusBar, FlatList } from 'react-native';
import NavTransparent from '../../components/NavTransparent';
import { requestUrl } from '../../network/Url';// 請求url
import Fetch from '../../network/Fetch'
import Loading from '../../components/Loading'; // 加載層
import * as Public from '../../utils/Public';
import LoadingMore from '../../components/LoadingMore';
import NoNetwork from '../../components/NoNetwork';
import StatusBarModule from '../../components/StatusBarModule';

export default class MyTeam extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            tabArr: [ //我的團隊分類切換文案
                {
                    "name": '一級團隊',
                    "param": '3',
                    "num": 0,
                },
                {
                    "name": '二級團隊',
                    "param": '4',
                    "num": 0
                }
            ],
            teamNum: 0, //團隊總人數
            activeIndex: 0, //我的團隊分類切換指定默認激活index
            dataArr: [], //團隊數據
            pageNum: 1,// 頁碼
            pageSize: 10,// 每頁條數
            networkFlag: true,//是否有網絡
            dataFlag: true,// 是否有下一頁
        }
    }
    componentWillMount() {
        //獲取團隊總人數
        if (this.props.navigation.state.params.teamNum) {
            this.setState({
                teamNum: this.props.navigation.state.params.teamNum,
            })
        }
    }
    componentDidMount() {
        this.getMyTeamList("3", 1);
        this.getMyTeamNum("4", 1);
    }
    getMyTeamList(param, pageNum) {
        if (pageNum == 1) {
            this.setState({
                dataArr: [],
                dataFlag: true,
            })
        }
        this.setState({
            isLoading: true,
        })
        Fetch(requestUrl.URL, {
            "userId": UserInfo.id,
            'param': param,
            "pageNum": pageNum,
        }).then(data => {
            console.log(data)
            if (data.status == "SUCCESS") {
                let tempTabArr = this.state.tabArr;
                if (param == '3') {
                    tempTabArr[0].num = data.count;
                } else if (param == '4') {
                    tempTabArr[1].num = data.count;
                }
                this.setState({
                    tabArr: tempTabArr
                })
                if (data.data.length >= this.state.pageSize) {
                    let tempArr = this.state.dataArr.concat(data.data)
                    this.setState({
                        dataArr: tempArr,
                        isLoading: false,
                        dataFlag: true,
                    })
                } else {
                    let tempArr = this.state.dataArr.concat(data.data)
                    this.setState({
                        dataArr: tempArr,
                        isLoading: false,
                        dataFlag: false,
                    })
                }
            } else if (data.status == "ERROR") {
                this.setState({
                    isLoading: false,
                    dataFlag: false,
                })
                ToastShow({ "text": '會員團隊獲取失敗' })
            } else if (data.status == "NONETWORK") {
                this.setState({
                    networkFlag: false,
                    isLoading: false,
                })
            } else {
                this.setState({
                    isLoading: false,
                })
            }
        })
    }
    getMyTeamNum(param, pageNum) {
        Fetch(requestUrl.URL, {
            "userId": UserInfo.id,
            'param': param,
            "pageNum": pageNum,
        }).then(data => {
            console.log(data)
            if (data.status == "SUCCESS") {
                let tempTabArr = this.state.tabArr;
                if (param == '3') {
                    tempTabArr[0].num = data.count;
                } else if (param == '4') {
                    tempTabArr[1].num = data.count;
                }
                this.setState({
                    tabArr: tempTabArr
                })
            } else if (data.status == "ERROR") {
                this.setState({
                    isLoading: false,
                })
                ToastShow({ "text": '會員團隊獲取失敗' })
            } else {
                this.setState({
                    isLoading: false,
                })
            }
        })
    }
    render() {
        const { navigate, goBack } = this.props.navigation;
        return (
            <View style={[styles.container, { backgroundColor: Colors.white }]}>
                <StatusBarModule isLoading={this.state.isLoading} />
                
                {/* 團隊總人數 */}
                <ImageBackground style={{ height: Px2dp(90) + NavHeight }} source={IPhoneX ? require('../../images/myCommonBgX.png') : require('../../images/myCommonBg.png')}>
                    <NavTransparent title={"我的團隊"} leftClick={() => { goBack() }} />
                    <View style={styles.MyVipNumBox}>
                        <Text style={styles.MyVipProson}>團隊總人數</Text>
                        <View style={styles.MyVipNum}>
                            <Text style={styles.MyVipNumS}>{this.state.teamNum}</Text>
                            <Text style={styles.MyVipNumP}>人</Text>
                        </View>
                    </View>
                </ImageBackground>
                {/* 一級二級團隊分類切換 */}
                <View style={styles.ScrollViewTab}>
                    {
                        this.state.tabArr.map((item, index) => {
                            return (
                                <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                    this.setState({
                                        activeIndex: index,
                                        pageNum: 1,
                                    })
                                    this.getMyTeamList(item.param, 1);
                                }} key={index}>
                                    <View style={[styles.myTabBox, this.state.activeIndex == index ? { borderBottomColor: Colors.red, borderBottomWidth: Px2dp(2) } : null]}>
                                        <Text style={[styles.ScrollViewTabTxt, this.state.activeIndex == index ? { color: Colors.red } : null]}>{item.name}</Text>
                                        <Text style={[styles.ScrollViewTabTxt, this.state.activeIndex == index ? { color: Colors.red } : null]}>({item.num})</Text>
                                    </View>
                                </TouchableOpacity>
                            )
                        })
                    }
                </View>
                {/* 一級二級團隊通用列表 */}
                {this.state.networkFlag ?
                    <FlatList
                        style={styles.flatListStyle}// 樣式
                        data={this.state.dataArr}// 數據源
                        initialNumToRenƒder={10}// 
                        keyExtractor={(item, index) => index.toString()}
                        ListFooterComponent={() => {
                            return (
                                <LoadingMore
                                    dataFlag={this.state.dataFlag}
                                    dataLength={this.state.dataArr.length}
                                />
                            )
                        }}//尾部組件
                        renderItem={({ item }) => this.renderItem(item)}// 渲染
                        onRefresh={() => {
                            this.setState({
                                pageNum: 1,
                            })
                            this.getMyTeamList(this.state.tabArr[this.state.activeIndex].param, 1);
                        }}//頭部刷新組件
                        refreshing={this.state.isLoading}//加載圖標
                        onEndReached={() => this.onEndReached()} // 加載更多
                        onEndReachedThreshold={.1}// 加載更多觸發時機
                        ItemSeparatorComponent={() => {
                            return (
                                <View style={{
                                    borderBottomColor: '#ececec',
                                    borderBottomWidth: Pixel,
                                }}></View>
                            )
                        }}// item 間隔線
                        ListEmptyComponent={() => {
                            // 無數據時顯示的內容
                            return (
                                !this.state.dataFlag && this.state.dataArr.length <= 0 ?
                                    <View style={styles.novipListLi}>
                                        <Image source={require('../../images/no_data_team.png')} />
                                        <Text style={styles.novipListLiTxt}>暫無相關信息</Text>
                                    </View>
                                    : null
                            )
                        }}
                    />
                    :
                    <NoNetwork click={() => {
                        this.setState({
                            pageNum: 1,
                            networkFlag: true,
                        })
                        this.getMyTeamList(this.state.tabArr[this.state.activeIndex].param, 1);
                    }} />
                }
            </View>
        );
    }
    onEndReached() {
        if (this.state.dataFlag) {
            let pageNum = this.state.pageNum * 1 + 1;
            this.setState({
                pageNum: pageNum,
            })
            this.getMyTeamList(this.state.tabArr[this.state.activeIndex].param, pageNum);
        }
    }
    renderItem = (item) => {
        let timeObj = Public.TimeConversion(item.createDate);
        let timeStr = timeObj.year + '-' + timeObj.month + '-' + timeObj.day + ' ' + timeObj.hours + ':' + timeObj.minutes + ':' + timeObj.seconds;
        return (
            <View style={styles.vipListLi}>
                <Image style={styles.vipListImg} source={item.head_url ? { uri: item.head_url } : require('../../images/logo.jpeg')} />
                <View style={styles.teamMain}>
                    <Text style={styles.teamMainTit}>{item.nick_name ? item.nick_name + "+" : ""}{item.name ? (item.name) : ""}</Text>
                    <Text style={styles.teamMainTel}>{timeStr}</Text>
                </View>
                <View style={styles.teamMainFrBox}>
                    <View style={styles.teamMainFr}>
                        <Text style={styles.teamMainFrDate}>本月：</Text>
                        <Text style={styles.teamMainFrNum}>{item.orderNum ? item.orderNum : "0"}單</Text>
                    </View>
                    <View style={styles.teamMainFrs}>
                        <Text style={styles.teamMainFrDate}>共計：</Text>
                        <Text style={styles.teamMainFrNum}>{item.orderNum ? item.orderNum : "0"}單</Text>
                    </View>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.garyBg,
    },
    //團隊總人數
    MyVipNumBox: {
        flexDirection: 'row',
        marginLeft: Px2dp(85)
    },
    MyVipProson: {
        fontSize: Px2dp(13),
        color: Colors.white,
        lineHeight: Px2dp(18),
        marginTop: Px2dp(36)
    },
    MyVipNum: {
        flexDirection: 'row',
        marginLeft: Px2dp(10),
        alignItems: "flex-end",
        marginTop: Px2dp(26),
    },
    MyVipNumS: {
        fontSize: Px2dp(40),
        color: Colors.white,
        lineHeight: Px2dp(56)
    },
    MyVipNumP: {
        fontSize: Px2dp(15),
        color: Colors.white,
        lineHeight: Px2dp(40),
    },
    MyVipNumBom: {
        width: Px2dp(255),
        fontSize: Px2dp(12),
        color: Colors.white,
        lineHeight: Px2dp(17),
        textAlign: "center",
        marginTop: Px2dp(10)
    },
    //一級二級團隊分類切換
    ScrollViewTab: {
        width: SCREEN_WIDTH,
        height: Px2dp(48),
        flexDirection: "row",
        alignItems: 'center',
        justifyContent: 'space-around'
    },
    ScrollViewTabTxt: {
        fontSize: Px2dp(15),
        color: Colors.text333,
        lineHeight: Px2dp(48),
    },
    //一級二級團隊通用列表
    flatListStyle: {
        backgroundColor: '#fff',
    },
    vipListLi: {
        flexDirection: "row",
        justifyContent: 'flex-start',
        paddingTop: Px2dp(16),
        paddingBottom: Px2dp(16),
        paddingLeft: Px2dp(15),
        paddingRight: Px2dp(15),
    },
    vipListImg: {
        width: Px2dp(52),
        height: Px2dp(52),
        marginRight: Px2dp(10),
        borderRadius: Px2dp(26),
        backgroundColor: '#dbdbdb'
    },
    teamMain: {
        marginTop: Px2dp(7),
        flex: 1
    },
    teamMainFrBox: {
        marginTop: Px2dp(7),
    },
    teamMainTit: {
        fontSize: Px2dp(14),
        color: Colors.text333,
        lineHeight: Px2dp(20)
    },
    teamMainTel: {
        fontSize: Px2dp(12),
        color: Colors.text888,
        lineHeight: Px2dp(17),
        marginTop: Px2dp(4)
    },
    teamMainFr: {
        flexDirection: "row"
    },
    teamMainFrs: {
        flexDirection: "row",
        marginTop: Px2dp(2)
    },
    teamMainFrDate: {
        fontSize: Px2dp(13),
        color: Colors.text666,
        lineHeight: Px2dp(18),
    },
    myTabBox: {
        flexDirection: "row"
    },
    teamMainFrNum: {
        fontSize: Px2dp(13),
        color: "#151515",
        lineHeight: Px2dp(18),
    },
    //暫無信息
    novipListLi: {
        alignItems: "center",
        justifyContent: 'center',
        paddingTop: Px2dp(50)
    },
    novipListLiTxt: {
        fontSize: Px2dp(14),
        color: Colors.text888,
        marginTop: Px2dp(20)
    }
});