【ReactNative入門】引っ張ってデータ更新(Refresh)

本記事はコピペシリーズの2記事目です。

実践的にReact Nativeを学びたい人"限定"の記事となってます。
（ ちょっとだけ知りたいという人は、こちらをどうぞ ）

みんなの疑問

「React Nativeで引っ張ってリスト更新ってどうやるの？」

「どんな感じに動くの？」

「カンタンに作りたい！！」

今回は画面を下に引っ張って、
リストのデータを更新する機能をReact Nativeで作成します。

英語ではPull to refreshと呼ばれ、アプリでは一般的な機能です。

しっかり学んで取り入れられるようにしましょう。

〰〰〰〰〰〰今回作るアプリ〰〰〰〰〰〰

【限定セール中】コピペで作るアプリシリーズ
　1/3 ... ニュース記事の取得 & 表示するアプリ：300 → 一時無料
　2/3 ... 引っ張ってニュースを更新する機能作成：600 → 500円
　3/3 ... 記事をあとで読む、メモ機能作成：800 → 500円

======【コピペで作るアプリシリーズ】======
1/3 ... ニュース記事の取得 & 表示するアプリ
2/2 ... 引っ張ってニュースを更新する機能作成  ← イマココ
3/3 ... 記事をあとで読む、メモ機能作成今回作成する機能（引っ張ってデータ更新. ReactNative）

引っ張って更新には、下記の考え方が必要です。

🚨 必要な考え方（実装手順）
　1. データ更新を行っている時は、更新中フラグを立てる
　2. データ更新を行う（実際にデータを再度取ってくる）
　3. データ更新後、更新中フラグを外す

『更新中フラグ』とは『更新している状態である』のことを指しており、ある状態を保持していることを『フラグ』といいます。
　（例えば ... 睡眠中は、寝ているフラグが立っている、空腹時はお腹空いているフラグが立っているなどと表します。）

フラグの管理には『前回の記事』のように『useState』を使います。
基礎的なポイントですが、重要なのでしっかりマスターしましょう！

引っ張ってデータ更新

（最後に、コードの全文を載せておきます）

🚨 必要な考え方（実装手順）
　✅ 1. データ更新を行っている時は、更新中フラグを立てる
　✅ 2. データ更新を行う（実際にデータを再度取ってくる）
　✅ 3. データ更新後、更新中フラグを外す

✅ 1. データ更新を行っている時は、更新中フラグを立てる

データの更新を実装するため、Home.jsを編集します。
✍️Home.jsを開いて、下記の『更新中フラグ』を立てるための変数を追加しましょう

  // isLoading = true  ... くるくる回っている状態（ = 更新フラグが立っているとき）
  // isLoading = false ... 更新をしていない状態  （ = 平常時）

  const [isLoading, setIsLoading] = useState(false); // ← 追加

🚨この『isLoading』をデータ更新時にtrueにして、更新が終わったらfalseにするということを繰り返すだけです。