ReactNativeとは
ネイティブUI型
参考:クロスプラットフォームアプリ開発技術の比較(React Native、Flutter…etc.) - NCDC株式会社
どうやらReactNativeは、ネイティブUI型というものらしい。
簡単な説明としては以下
ネイティブUI型の場合、OSの中にあるネイティブレンダーを利用してUIを描画します。そのためアプリ側ではレンダリングを正確にコントロールすることはできません。
メリット
1. OSに合わせたUIデザインになるため、それぞれのユーザーが操作しやすくなる。
それはそれでアリだよなぁってonigiri.w2.icon
わざわざ、iOSとAndroidでデザインと統一する必要があるのかどうか。
デメリット
1. デザインがOS依存のため、OS間でデザインを統一できない。
2. 結局OSごとに細かい設定が必要になる可能性が多分にある。
3. レンダリング処理速度が遅い。
これは結構きつい....orzonigiri.w2.icon
Flutterは独自レンダー型というやつで、OS依存しないらしい
なので、レンダリング速度とかも早いんだとか。
でもまあ、ReactNative側も日々速度改善はしてるだろうよ。
ReactNativeの利用場面
プロトタイプ的に効率的にアプリ開発を進めたい
デザインや機能しようがコントロールできるようなアプリ(技術的制約と戦わなくてい)
参考:ゼロから始める React Native + Expo 入門
将来的にプロダクトの成長に伴ってネイティブコードへのアクセスがどうしても必要になるという場合は、Expo を eject して使うという方法もあるようです。
つまり Expo での高速開発の恩恵を受けつつプロダクト自体が成長したタイミングで、eject して運用。将来的にはネイティブアプリ運用に持っていくのもありなのかなと思います。
なるほどなぁ。まあそんな感じよなぁ...onigiri.w2.icon
でもさ、以下のurl見ると、大体のことできそうよなwwonigiri.w2.icon
https://reactnative.dev/showcase.html
だから、あんま心配しなくていいかもonigiri.w2.icon
ReactNativeでプロトタイプなら、Expoの立場どうなんねん!!onigiri.w2.icon
アプリ例
iSimar/HackerNews-React-Native: Hacker News iOS and Android App - Made with React Native.
fbsamples/f8app: Source code of the official F8 app of 2017, powered by React Native and other Facebook open source projects.
本番環境でのReactNativeの動作イメージ
参考
React NativeとFlutterのレンダリングアーキテクチャ - Qiita
React Nativeの Re-architecture について。 - Qiita
Cross Platform Implementation · React Native
Threading Model · React Native
簡単なイメージだけ
モバイル上では以下のメンバーが躍動して動いてるっぽい(確実では無いが)
1. Javascript ランタイム
ユーザーが書いたJavascriptコードが動く
2. Javascriptとネイティブをつなぐやつ
「1.」と「3.」の動作を繋いでる
3. ネイティブ側のランタイム
実際にユーザーに見えるUIとか動作とかを司る。
最近は?以下の感じ?かも
https://scrapbox.io/files/647738fda34c14001b3bd3f6.png
Why a New Architecture · React Native
まあいずれにせよ以下は正しいはず。
「ビルド時にJavascriptをネイティブ言語に変換してる」とかではない!!
Javascriptはモバイル上のJavascriptランタイム上で元気に動いてる。
JavaScript Environment · React Native
ReactNativeの動作テストってどうやるん
参考:Running On Device · React Native
なんか、Expoみたいに簡単にできるわけではなさそうです。。。onigiri.w2.icon
いや、簡単にできそうです。
$ npx react-native start
ネイティブモジュールをAPI形式でJSから使える!?
Native Modules Intro · React Native
動作させてみる
【入門編】React Nativeとは?メリット・デメリット…|Udemy メディア
参考URL
React Native 一問一答 - Qiita
Input
hr.icon
Core Components and Native Components · React Native
なるほど、ReactNativeで用意されてるViewやTextって、裏で以下のようにつながってたのか。
table:
REACT ネイティブ UI コンポーネント アンドロイドビュー IOSビュー ウェブアナログ
<View> <ViewGroup> <UIView> 非スクロール<div>
<Text> <TextView> <UITextView> <p>
<Image> <ImageView> <UIImageView> <img>
<ScrollView> <ScrollView> <UIScrollView> <div>
<TextInput> <EditText> <UITextField> <input type="text">
https://reactnative.directory/
ReactNativeで使えるライブラリたち