모바일 단말의 React Native ListView에 상단 풀다운 새로 고침과 하단 클릭 새로 고침을 추가한 사례에 대한 자세한 설명

이번에는 모바일 단말기에서 React 네이티브 ListView에 상단 풀다운 새로고침과 하단 클릭 새로고침을 추가한 사례에 대해 자세히 설명을 들고 왔습니다. 다음은 모바일 단말기의 ListView 인가요? 실제 사례를 살펴보겠습니다.

1. 하단 새로고침 클릭

1.1 먼저 button

render() {
  if(!this.state.data){
   return(
     <Text>Loading... </Text>
   )
  }else{
   return(
     <ListView
      refreshControl={
       <RefreshControl 
         refreshing = {false}
         onRefresh = {this.reloadWordData.bind(this)}
       />
      }
      dataSource={this.state.data}
      renderRow={(rowData)=>this.renderRow(rowData)}
      renderFooter={this.renderFooter.bind(this)}
     >
      </ListView>
 
   );
  }
 }
 
renderFooter(){
   return (
   <View style={{marginVertical: 10, marginBottom:20}} >
      <Button
       onPress={this.addMoreOnFoot.bind(this)}
       title="点击载入更多"
      />
    </View>
   )
 }

RenderFooter 메소드를 ListView에 추가하여 하단 요소를 그립니다. 내부에 버튼을 표시합니다.

버튼 처리 로직:

addMoreOnFoot(){
 // alert('addMoreOnFoot')
 // console.log('addMoreOnFoot')
 const url = 'http://127.0.0.1/getFootContent?lastid=' + this.state.footLastId + '&count=20&isTop=0'
 fetch(url)
 .then((response)=>response.json())
 .then((jsondata)=>{
   if (jsondata.data && jsondata.data.length > 0){
   const rowData = this.state.jsondata.concat(jsondata.data);
   this.setState({
    footLastId:jsondata.data[jsondata.data.length - 1]['id'],
    jsondata:rowData,
    data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData),
   })
   }
 })
 .catch((error)=>{
  alert(error);
 });
}

클릭 후 네트워크 처리가 이루어지며, 마지막 ID도 서버에 전달되고, 서버는 이 ID 이후 20개의 레코드를 반환합니다. 그런 다음 재설정 상태.

2. 헤드 풀다운 새로 고침

ListView에 RefeshControl 추가

render() {
  if(!this.state.data){
   return(
     <Text>Loading... </Text>
   )
  }else{
   return(
 
     <ListView
      refreshControl={
       <RefreshControl 
         refreshing = {false}
         onRefresh = {this.reloadWordData.bind(this)}
       />
      }
      dataSource={this.state.data}
      renderRow={(rowData)=>this.renderRow(rowData)}
      renderFooter={this.renderFooter.bind(this)}
     >
      </ListView>
 
   );
  }
 }

최신 헤더 데이터를 로드하고 this.State

reloadWordData(){
  // alert(this.state.topLastId)
  const url = 'http://127.0.0.1/getFootContent?lastid=' + this.state.topLastId + '&count=20&isTop=1'
  fetch(url)
  .then((response)=>response.json())
  .then((jsondata)=>{
    if (jsondata.data && jsondata.data.length > 0){
    const rowData = jsondata.data.concat(this.state.jsondata);
    this.setState({
     topLastId:jsondata.data[0]['id'],
     jsondata:rowData,
     data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData),
    })
    }
  })
  .catch((error)=>{
   alert(error);
  });
 }

에 추가하세요. 이 글의 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. 더 흥미로운 정보를 보려면 와주세요. PHP 중국어 웹사이트에서 다른 관련 기사도 주목하세요!

추천 자료:

layui에서 동적 및 정적 페이징을 구현하는 단계에 대한 자세한 설명

Angular 라우팅 강조를 구현하는 단계에 대한 자세한 설명

위 내용은 모바일 단말의 React Native ListView에 상단 풀다운 새로 고침과 하단 클릭 새로 고침을 추가한 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!