开发示例应用程序，我的项目中有一个问题，在列表视图中调用每10条记录显示Spinner，如Activity Indicator。我的问题是我使用列表视图显示列表组件我在侧列表视图组件中使用刷新控件有一个刷新列表。但我不知道如何使用下拉显示微调器每10条记录。 任何人请向我展示样品演示代码。
这是我的代码，
这里是调用componentDidMount（）的下面方法。
getNewOrders(){
AsyncStorage.getItem('Data',(err,dataSource)=>{
// alert("dataSource:"+JSON.stringify(dataSource))
var data=JSON.parse(dataSource)
if(dataSource) {
this.setState({
asyncdataUrl: data.Url,
siteId:data.Keys.siteId
},()=>{
var str = this.state.asyncdataUrl;
str = str.replace(/[^a-z0-9]/g, '');
str=str.replace("https","");
var siteId = this.state.siteId;
// alert("streee:"+str + this.state.siteId);
var value = 0;
this.state.value = value;
var string = {
"from" : this.state.value, "size" : 10,
"query": {
"bool": {
"filter": [
{
"match_phrase": {
"meta._customer_user.long" : this.state.tokenval
}
},
{
"match_phrase": {
"post_type" : "shop_order"
}
},
{
"terms": {
"post_status" : ["wc-processing", "wc-pending", "wc-on-hold"]
}
}
],
"must_not": {
"match_phrase": {
"post_type" : "shop_order_refund"
}
},
"must": {
"match_all": {}
}
}
},
"_source": ["post_id", "post_type", "permalink", "post_status", "post_date", "post_excerpt", "post_site_data.*", "post_order_summary.*", "meta._customer_user.long", "meta._billing_first_name.value", "meta._billing_last_name.value", "post_line_items.*"],
"sort": { "post_date": { "order": "desc" }}
}
fetch('https://ori-eu-west-1.searchly.com/_all/_search',{
method:'POST',
headers:{
// 'Accept':'application/json',
'Content-Type':'application/json',
'Authorization': config.AuthorizationKey
},
body:JSON.stringify(string)
}).then((response)=>response.json()).then((responseData)=>{
// alert("rowDatanewOrders:"+JSON.stringify(responseData.hits.hits[3]._source.post_line_items[0]))//._source.post_line_items[0]
if(responseData.status == 404 || responseData.hits.hits.length === 0) {
this.setState({animating:false})
//Alert.alert("", "No orders found")
}
else if(responseData.status == 'error'){
this.setState({animating:false})
Alert.alert("", responseData.message)
}
else{
if(responseData.hits.hits.length <10){
//alert("rowDatanewOrders:"+JSON.stringify(responseData.hits.hits.length))
this.setState({
loadmore:'dontShow'
})
}
else if(responseData.hits.hits.length >=10){
this.setState({
loadmore:'false'
})
}
this.setState({
animating:false,
// loadmore:'false',
newOrderdataSource:this.state.dataSource.cloneWithRows(responseData.hits.hits),
NewOrdersdata:responseData.hits.hits
})
// alert("value:"+this.state.NewOrdersdata[0])
}
}).catch((err)=>{
console.error(err)
})
})
}
}).done()
}
renderFooter(){
// alert("dfdsfds")
if(this.state.loadmore == 'true'){
return(
<ActivityIndicator
color = '#494949'
size = "large"
style = {{height:4}}
/>)}
else {
return(
<View></View>)
}
}
onEndReachedNew(){
// setTimeout(()=>{
if(this.state.loadmore != 'dontShow'){
this.setState({
loadmore:'true'
},()=>{
// console.log("LodingData@@@@:" +this.state.loadmore)
this.loadMoreData()
})
}
// }, 3000)
// this.setState({
// loadmore:'false'
// })
}
this is my ListView Component:
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh.bind(this)}
/>
}
enableEmptySections ={true}
removeClippedSubviews={true}
dataSource={this.state.newOrderdataSource}
renderRow={this.listViewnewOrder.bind(this)}
renderFooter={this.renderFooter.bind(this)}
onEndReached = {this.onEndReachedNew.bind(this)}/>
loadMoreData(){
this.setState({
// loadmore:'false',
value:this.state.value+10
},()=>{
var str = this.state.asyncdataUrl;
str = str.replace(/[^a-z0-9]/g, '');
str=str.replace("https","");
var siteId = this.state.siteId;
// alert("streee:"+this.state.siteId +str);
//var value = 0;
// this.state.value = value;
var string = {
"from" : this.state.value, "size" : 10,
"query": {
"bool": {
"filter": [
{
"match_phrase": {
"meta._customer_user.long" : this.state.tokenval
}
},
{
"match_phrase": {
"post_type" : "shop_order"
}
},
{
"terms": {
"post_status" : ["wc-processing", "wc-pending", "wc-on-hold"]
}
}
],
"must_not": {
"match_phrase": {
"post_type" : "shop_order_refund"
}
},
"must": {
"match_all": {}
}
}
},
"_source": ["post_id", "post_type", "permalink", "post_status", "post_date", "post_excerpt", "post_site_data.*", "post_order_summary.*", "meta._customer_user.long", "meta._billing_first_name.value", "meta._billing_last_name.value", "post_line_items.*"],
"sort": { "post_date": { "order": "desc" }}
}
fetch('https://ori-eu-west-1.searchly.com/_all/_search',{
method:'POST',
headers:{
// 'Accept':'application/json',
'Content-Type':'application/json',
'Authorization': config.AuthorizationKey
},
body:JSON.stringify(string)
}).then((response)=>response.json()).then((responseData)=>{
// alert("responseData:"+JSON.stringify(responseData))
if(responseData == undefined){
if(responseData.hits.hits.length == 0){
this.setState({
loadmore:'dontShow'
})
}
else if(responseData.hits.hits.length <10){
responseData.hits.hits.map((res)=>{
this.state.NewOrdersdata.push(res)
})
this.setState({
loadmore:'dontShow',
newOrderdataSource:this.state.dataSource.cloneWithRows(this.state.NewOrdersdata),
})
}
else{
responseData.hits.hits.map((res)=>{
this.state.NewOrdersdata.push(res)
})
this.setState({
loadmore:'false',
value:this.state.value+10,
newOrderdataSource:this.state.dataSource.cloneWithRows(this.state.NewOrdersdata),
})
}
}
}).catch((err)=>{
console.error(err)
})
})
}
实际上我正在调用两次使用我的函数。我认为这是错误的调用方式，因为没有代码可重用性。请告诉我如何调用显示每次下拉微调器添加10 +记录。