React ネイティブ ListView を使用して上部のプルダウン更新と下部のクリック更新を追加する方法

今回はReactネイティブListViewを使って上部プルダウン更新と下部クリック更新を追加する方法を紹介します ReactネイティブListViewを使用して上部プルダウン更新と下部クリック更新を追加する際の注意点や注意点は何でしょうか？以下に実際のケースを見てみましょう。

1.下部の更新をクリック

1.1 まず

ボタン

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

を追加して、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. Headプルダウンリフレッシュ

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

最新のヘッダーデータを読み込み、これに追加します

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 中国語 Web サイトの他の関連記事にもご注目ください。

推奨読書:

vue.extendを使用してアラートモーダルボックスポップアップコンポーネントを実装する方法

vueコンポーネントを使用してポップアップボックスのクリックで表示/非表示を実装する方法

以上がReact ネイティブ ListView を使用して上部のプルダウン更新と下部のクリック更新を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。