后台要求传入的model样式
{
"Query": {
"Keyword": "CFO"
},
"Pagination": {
"PageSize": 10,
"PageIndex": 1
}
}
获取的数据样式：
[
{"Id":353,"Name":"董事长","Status":1,"CreateTime":"2021-02-04T23:41:42.712802","CustomerId":39573,"Level":1,"RulesTravelId":null,"ExternalNumber":null},
{"Id":352,"Name":"总经理","Status":1,"CreateTime":"2021-02-04T23:41:42.712802","CustomerId":39573,"Level":2,"RulesTravelId":151,"ExternalNumber":null},
{"Id":400,"Name":"123123","Status":1,"CreateTime":"2021-02-04T23:41:42.712802","CustomerId":39573,"Level":3,"RulesTravelId":211,"ExternalNumber":null},
{"Id":349,"Name":"CFO","Status":1,"CreateTime":"2021-02-04T23:41:42.712802","CustomerId":39573,"Level":5,"RulesTravelId":211,"ExternalNumber":null},
{"Id":350,"Name":"CMO","Status":1,"CreateTime":"2021-02-04T23:41:42.712802","CustomerId":39573,"Level":6,"RulesTravelId":164,"ExternalNumber":null}
]
ListScreen.js页面
import React from 'react';
import {
View,
FlatList,
StyleSheet,
TouchableHighlight
} from 'react-native';
import SuperView from '../../../super/SuperView';//父级页面
import SearchInput from '../../../custom/SearchInput';//搜索框
import CustomText from '../../../custom/CustomText';//Text方法的封装，可用Text组件替换
import Theme from '../../../res/styles/Theme';//主体颜色页面
import EnterpriseOrderService from '../../../service/EnterpriseOrderService'//接口的封装页面
import ViewUtil from '../../../util/ViewUtil'//页面封装工具
export default class ListScreen extends SuperView {//页面继承一个SuperView可忽略
constructor(props) {
super(props);
this.params = props.navigation.state.params || {};//接收上个页面传过来的数据
this._navigationHeaderView = {
title:'职级',
}
this._tabBarBottomView = {
bottomInset: true
}
this.state = {
keyWord: '',
projectList: [],
isLoading:false,
isNoMoreData:false,
isLoadingMore:false,
page:1
}
}
componentDidMount() {
this._reloadProjectList();
}
_reloadProjectList = () => {
const { keyWord,page } = this.state;
let model = {
Query: {
Keyword: keyWord//搜索框里输入的值
},
Pagination: {
PageSize: 10,//一页有几组数据
PageIndex: page//页数
}
}
EnterpriseOrderService.Enterprice_dutyQuery(model).then(response => {//EnterpriseOrderService为封装的post请求数据的方法
if (response && response.success) {
if (response.data&&response.data.ListData) {
this.state.projectList = this.state.projectList.concat(response.data.ListData);//上拉时数据显示需要加上上一页page获取的数据
//console.log(JSON.stringify(this.state.projectList));
if (this.state.projectList.length >= response.data.Pagination.TotalItem) {
//当上拉后的数组长度等于或大于返回数组的总条数时将isNoMoreData设置为true，isLoadingMore设置为false这时底部ListFooterComponent就会显示没有更多了
this.setState({
isNoMoreData:true,
isLoadingMore:false
})
}
this.setState({
projectList:this.state.projectList
})
}
}
}).catch(error => {
this._detailLoadFail();
this.toastMsg(error.message || '加载数据失败请重试');
})
}
_submitEditing = () => {//搜索框内的方法
this.setState({
isLoading: true,
isNoMoreData: false,
isLoadingMore: false,
projectList: [],
page: 1
}, () => {
this._reloadProjectList();
})
}
_backOrderClick = (item) => {
this.params.callBack(item);
this.pop();
}
_renderItem = ({ item, index }) => {
return (
<TouchableHighlight underlayColor='transparent' onPress={this._backOrderClick.bind(this, item)}>
<View style={styles.row}>
<CustomText style={{ flex: 1, marginLeft: 10 }} numberOfLines={3} text={item.Name} />
</View>
</TouchableHighlight>
)
}
renderBody() {
const { keyWord, projectList, isLoading,isNoMoreData,isLoadingMore } = this.state;
let placeholder = '请输入至少两个连续字符';
return (
<View style={{ flex: 1 }}>
<SearchInput placeholder={placeholder} value={keyWord} onChangeText={(text) => this.setState({ keyWord: text })} onSubmitEditing={this._submitEditing} />//搜索框
<FlatList
data={projectList}
renderItem={this._renderItem}
keyExtractor={(item, index) => String(index)}
onEndReachedThreshold={0.1}//距底部距离是多少的时候刷新
onEndReached={() => {//上拉刷新的方法
setTimeout(() => {
if (this.canLoadMore && !isNoMoreData) {
this.setState({
isLoadingMore: true,
page: ++this.state.page
}, () => {
this._reloadProjectList();
this.canLoadMore = false;
})
}
}, 100);
}}
refreshControl={ViewUtil.getRefreshControl(isLoading, () => {//下拉加载的方法
this.setState({
page: 1,
isNoMoreData: false,
isLoadingMore: false,
projectList: [],
}, () => {
this._reloadProjectList();
})
})}
ListFooterComponent={ViewUtil.getRenderFooter(isLoadingMore, isNoMoreData)}//底部显示isLoadingMore为false和isNoMoreData为true时显示 没有更多了，isLoadingMore为true显示正在加载
onMomentumScrollBegin={() => {
this.canLoadMore = true;
}}
/>
</View>
)
}
}
const styles = StyleSheet.create({
row: {
backgroundColor: 'white',
height: 50,
borderBottomColor: Theme.lineColor,
borderBottomWidth: 1,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
}
})
ViewUtil.js
import React from 'react';
import {
View,
ActivityIndicator,
RefreshControl,
} from 'react-native';
import CustomText from '../custom/CustomText';
import I18nUtil from './I18nUtil';
export default class ViewUtil {
/**
*
* @param 是否加载 isLoading
* @param 事件 onRefresh
*/
static getRefreshControl(isLoading, onRefresh) {
return (
<RefreshControl
title='Loading...'
colors={['red']}
refreshing={isLoading}
onRefresh={onRefresh}
tintColor={'orange'}
/>
)
}
/**
*
* @param 加载更多 isLoadingMore
* @param 没有更多 isNoMoreData
* @param 需要加载 isLoading
*/
static getRenderFooter(isLoadingMore, isNoMoreData, isLoading) {
if (isLoadingMore) {
return (
<View style={{ alignItems: 'center' }}>
<ActivityIndicator style={{ color: 'red', margin: 5 }} />
<CustomText text={I18nUtil.translate('正在加载更多') + '...'} />
</View>
)
}
if (isNoMoreData) {
return (
<View style={{ alignItems: 'center', padding: 15 }}>
<CustomText style={{color:'rgba(81,81,81,1)'}} text={I18nUtil.translate('没有更多数据了') + '...'} />
</View>
)
}
if (isLoading) {
return (
<View style={{ alignItems: 'center' }}>
<CustomText text='下拉刷新...' />
</View>
)
}
return null;
}
}
网友评论