2018年3月15日

プログラミング

ActivityIndicatorでローディング画面をつくる 【これからはじめるReact Native】

目次

  1. はじめに
  2. ActivityIndicatorを使ってみる
  3. まとめ

はじめに

前回はModalの使い方について解説しました。

Modalを使ってみる【これからはじめるReact Native】


今回は、少し大きめのデータ通信を行う際など、アプリでローディングに時間のかかる処理時にローディング画面を見せる方法をご紹介します。

こういったローディング時、何も表示されず数秒固まってしまうと、フリーズが起きたのかなとユーザーは不安になります。
そんなときにインジケータと呼ばれるぐるぐる回るアイコンが表示されていれば、「今はローディング中なんだな」とユーザーを少し安心させることができます

今回はそんなインジケータを実現するActivityIndicatorコンポーネントを使ってみます。

ActivityIndicatorを使ってみる

では、いつものようにSnack Expoを使ってみましょう。

 

 

このようなイメージになります。

bb.gif (79.9 kB)

コードの解説

では、いつものようにコードの解説をしていきます。

import { ActivityIndicator, View, StyleSheet } from 'react-native';

こちらでActivityIndicatorコンポーネントを読み込んでいます。

  state = {
    animating: true
  }

初期化処理をしています。
animatingtrueを初期値として設定しています。

  componentDidMount() {
    setTimeout(() => {
      this.setState({ animating: false });
      alert("はじまるよー!");
    }, 10000);
  }

componentDidMount は以前コンポーネントのライフサイクルイベントを解説したように、コンポーネントがマウントされたら発生するイベントです。

setTimeout(() => {
      this.setState({ animating: false });
      alert("はじまるよー!");
    }, 5000);

setTimeout は一定時間後に処理を行うことができます。
繰り返しは行わず、1回だけ処理を行います。
引数を2つ持ち、1つ目は実行する処理、そして2つ目は処理を実行するまでの時間(ミリ秒)です。

なので今回の場合は() からはじまる関数部分を、第二引数である5秒(5000ミリ秒)後に実行する、というものです。
詳しく見ていくと
this.setState({ animating: false }); こちらでanimatingfalseを設定しています。
そしてこちらでアラートを実行しています。 alert("はじまるよー!");

初期化処理でanimatingtrueを設定していましたが、この処理でコンポーネントがマウントされてから5秒後にanimatingfalseが設定されていますね!

const animating = this.state.animating
先程設定したstateanimatinganimatingという変数に設定しています。
this.state.~の部分をそのまま値に設定すると、コードのメンテナンス性が良くない点もあり、こうして変数に設定することが多いです。
const再代入不可能な変数です。

<ActivityIndicator
   animating = {animating}
   color = '#0000aa'
   size = "large"
   style = {styles.activityIndicator}/>

ここがActivityIndicatorの表示箇所です。
いくつかpropsを見ていきます。
animating はインジケータの表示、非表示を制御します。
デフォルトはtrueで表示状態となっています。

先程ご紹介した初期化処理でanimating(正確にはthis.state.animating)にtrue、そして5秒経ったらfalseが設定されましたね。

color ではインジケータの色を設定できます。
size は大きさを表し、smalllargeの2種類があります。

流れの振返り

  1. まず初期化処理でstateanimatingtrueが設定される。
  2. stateanimatinganimating変数にセットする。
  3. ActivityIndicatorコンポーネントでanimating に animating変数が設定され、インジケータがレンダリングされる。
  4. setTimerで5秒経ったらanimating に false が設定される。
  5. stateに変更があったので、ActivityIndicatorコンポーネントでanimating ( state のanimating)が更新され、インジケータが再レンダリングされる。
  6. アラートが実行される。

POINT!!

constは再代入不可能にも関わらず、どうしてanimatingの更新を検知できるのか疑問に思われる方もいるのではないでしょうか?
animatingに入っているのはstateのanimatingです。このstate自体を変更することは再代入ではなく、stateが変更されているので再レンダリングされ、animatingも再定義されています。。

まとめ

今回はローディングアニメーションを表示可能なActiveIndicatorコンポーネントをご紹介しました。
小さな演出ではありますが、確実にローディングしているという安心感をユーザーに与えることができます。
ぜひ活用してみてください。

React Nativeのお仕事に関するご相談

Bageleeの運営会社、palanではReact Nativeに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

1

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP