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)
}
});
标签：pageNum,跳坑,param,react,item,state,Px2dp,data,native 来源： https://blog.csdn.net/kingrome2017/article/details/90550457