React Nativeで、 iOS、Android、そしてWebページに対応したメディアクエリの実装方法

iOS、Android、そしてWebページに対応したメディアクエリをReact Nativeで実装する方法を紹介します。

サイトのキャプチャ

Media Queries with React Native for iOS, Android, and Web
by Evan Bacon

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

Expo Webの開発中にわたし達が抱えていた大きな課題は、メディアクエリを誰がどうやって実装するかです。

メディアクエリは、デバイスの状態に基づいて切り替えることができるスタイルのルールで、スクリーンのさまざまなサイズや向きで機能するレスポンシブ対応のレイアウトを簡単に構築するための重要なポイントです。

Reactにはメディアクエリの素晴らしいライブラリがすでに数多くありますが、ユニバーサルシステムの最適なアプローチはネイティブにポリフィルを行い、既存のエコシステムを再利用することだと考えました。その結果は@expo/match-mediaで、お気に入りのライブラリの大部分を使用することができます。

具体的に説明すると、Expoに付属しているネイティブのScreen Orientation moduleを使用して、向きが変わった時にクエリを実行します。また、スクリーン分割機能を使用するAndroidデバイスのスクリーンサイズも監視します。

実装方法

ここではExpoアプリでreact-responsiveを使用する方法を紹介します。もちろんreadmeには常に最新の情報が記載されていますが、内容はおそらくあまり変わらないでしょう😁

最初にパッケージをインストールします。

次に、プロジェクトのルートでパッケージをインポートします。

簡単ですね、これで完了です。
React Responsiveでできることの詳細についてはドキュメントをご覧ください。これだけでクエリを取得できます!

まとめ

一つのjsファイルにまとめました。

サイトのキャプチャ

App.js -GitHub

コードはMITライセンスで、下記の通りです。

sponsors

top of page

©2019 coliss