こんにちは!テラーノベルとテラードラマでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです!
最近、React Nativeの人気が高まっており、新規プロダクトでの採用を検討している方も多いのではないでしょうか。その際、多くの方が気になるのは「React Nativeで実現できないことはあるのか?」という点だと思います。
結論から言うと、ネイティブプラットフォーム(iOS/Android)の実装知識があれば、React Nativeで実現できないことはないと私は考えています。
この記事では、その理由と具体的な実現方法について解説します。
Expo GoとExpo Dev Client
これからReact Nativeアプリを開発する場合、フレームワークであるExpoを利用するのが一般的です。Expoには、開発の進め方として主に2つの方法があります。
- Expo Go: 標準的なライブラリが組み込まれたランタイム上で、手軽に開発を始められます。
- Expo Dev Client: 自分でネイティブコードを追加するなど、ランタイムを自由にカスタマイズできます。
Expo Goは手軽さが魅力ですが、一部機能に制限があります。その制限を超える開発が必要な場合は、Expo Dev Clientを利用することになります。
Native Modules
React Nativeには、ネイティブ(Swift/Kotlinなど)のAPIを呼び出すためのNative Modulesという仕組みが公式に用意されています。
これを活用することで、ネイティブプラットフォーム固有のUIをReact Native内に表示したり、OSの機能を直接呼び出したりすることが可能になります。
Expoでは、このNative Modulesをより安全かつ扱いやすくするためのExpo Modules APIが提供されています。また、Expo Config Pluginsという仕組みを使えば、ネイティブプロジェクトの設定ファイルをJavaScript側から変更することも可能です。
Expo ModulesとExpo Config Pluginsの詳細は、こちらの記事をご参照ください。
ネイティブの画面を呼び出す
「この画面だけはネイティブで実装した方が効率的だ」というケースもあるでしょう。その場合、UIViewController (iOS) や Activity (Android) で画面を丸ごとネイティブで実装し、それをReact Nativeから呼び出すというアプローチも有効です。
作成したネイティブ画面を表示するためのメソッドをNative Modules経由で公開することで、React Native側から簡単に呼び出せるようになります。
iOSのWidgetやLive Activityといった機能を実装したい場合は、expo-apple-targetsというライブラリが役立ちます。
このライブラリを使うと、Widgetなどの機能ごとにサブプロジェクトが作成され、ビルド時にメインアプリと自動的にリンクされます。実装自体はSwiftで行う必要がありますが、React NativeプロジェクトにWidgetなどの機能を追加することが可能です。
高度なUIの実装
グラフ描画やブラーエフェクトなど、高いパフォーマンスが求められるUIを実装したい場合はどうでしょうか。
React NativeにはReact Native Skiaという強力なライブラリがあります。これは、Flutterでも採用されているグラフィックスエンジン「Skia」をReact Nativeで利用できるようにしたものです。
React Native Skiaを使えば、パフォーマンスを犠牲にすることなく、非常に高度で滑らかなUIを実装できます。
まとめ
結論として、「React Nativeだからできない」ということはありません。
ネイティブの知識を組み合わせれば、プラットフォームの制約は乗り越えられます。
弊社の「テラードラマ」でも、外部の動画再生SDKやLive Activityなど、ネイティブ連携を駆使して実装しており、React Nativeが原因で諦めた機能はありません。
「できないかも?」と思った時は、ネイティブ連携で実現できるか、またBlueskyのようなOSSのReact Native製OSSのソースコードを読んで、どのように実現しているか確認してはいかがでしょうか。
それでは、良いReact Nativeライフを!
関連
Views: 0