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) } });