![見出し画像](https://assets.st-note.com/production/uploads/images/44340458/rectangle_large_type_2_0fada6f4f9fcfc1bf71491c92f99e735.png?width=1200)
【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にするということを繰り返すだけです。
ここから先は
¥ 200
この記事が気に入ったらサポートをしてみませんか?