ushumpei’s blog

生活で気になったことを随時調べて書いていきます。

React Nativeの画像遅延読み込み(ライブラリのソースを読んで見る)

 この記事を要約すると、「画像遅延読み込みの方法が知りたくて、ライブラリのソースコードを読んで、Objective-Cのコードにたどり着いて、次に進めなくなってしまい一旦諦めたけれど、これを糧にもっと勉強しようという気になった」という自己満話です。

概要

 少し前までWebサービスのユーザーのインターネット回線速度をそこまで強く意識したことがありませんでした。

 もちろんパフォーマンス計測はしていましたが、サーバー側の処理を改善することで対処していて、あくまで一般的なユーザーは回線がある程度の速度であることを仮定していましたし、回線が弱すぎるのはユーザー側の問題としている部分がありました。

 この回線の強弱に関する考え方が私が感じた、モバイルアプリとWebの大きな違いでした。

 モバイルでは回線が弱くなることが容易に起こりうるし、そのせいでアプリが操作不能になってしまうことは、ユーザーにとってストレスだと思います(操作不能にする方がいいケースもあると思います)。いや、といよりモバイルから閲覧するWebサービスとアプリとの違いでいうと、アプリだとオフライン状態でも使えるように作れる部分があるので、極力そうしていった方が親切だし、ユーザーも安心だよね、という話です。

 多分モバイルアプリ開発者の方々からすると当然すぎることだと思うのですが、私がこのことに気がつくためには、いつまでたっても画像が読み込まれないまま動かない、という経験が必要でした。(頭が悪いです)

読んでみる

 そんなこともあり遅延読み込みのライブライreact-native-image-progressとかに触れたのですが、そもそもどうやって遅延読み込みを実現しているか、ソースを読んでみようというのが今回の内容です。

 とりあえず一番はじめのリリース0.1.0を読む;

  • 基本的にはreact-nativeImageコンポーネント
  • Imageの読み込み開始、進捗、終了イベントハンドラにコールバックを登録している
  • Imageのprogressイベントについて苦労したんだろうなと感じられる
  • 遅延読み込み方法はImageのコードを読まなければわからない

 ということなのでreact-nativeImageコンポーネントのソースを読む;

  • RCTImageViewを読むべきとわかる

 ここからObjective-Cです、RCTImageView.mを読む;

  • RCTDirectEventBlockで詰まる…

すみません、詰まりました。

感想

 知らないことがたくさん見つかりましたし、いかに色々なことを知らないままで使っていたかわかりました。予想として遅延読み込みに関してはjavascriptfetchメソッドとかで実装されてて、簡単に読めないかな、とか思って軽く記事を書き始めたのですが、普通にネイティブでした。

 結局わからずじまいになってしまい、かなりダメダメなので、しばらくいろんなソースを読んでみることにすると思います。Objective-Cの基本的な構文も抑えて今回の詰まったところを解消したいです。あとReact Nativeの仕組みもちゃんと知りたくなりました。

 余談ですがFacebookのライセンスの話、どう捉えるか考えなければ。。。